Images and Embeds

Responsive images with zoom and rich media embeds to enhance and illustrate your documentation.

Images

Responsive images with automatic optimization and interactive zoom functionality.

![Image](/assets/templates/nuxt/dashboard-dark.png)

If @nuxt/image is installed, the <NuxtImg> component will be used instead of the native img tag for enhanced performance and optimization.

Zoom

By default, images support interactive zoom: clicking an image opens it in a modal overlay with smooth transitions, allowing users to examine details more closely.

To prevent zoom on a specific image, add the :zoom="false" attribute.

Image without zoom

![Image without zoom](/assets/templates/nuxt/dashboard-dark.png){:zoom="false"}

Sizing

Images automatically adapt to their container while maintaining aspect ratio. You can control sizing through markdown or HTML attributes when needed.

Small Image

![Small Image](/assets/templates/nuxt/dashboard-dark.png){width="300"}

Prop	Default	Type
`src`		`string`
`alt`		`string`
`width`		`string \| number`
`height`		`string \| number`
`zoom`	`true`	`boolean` Zoom image on click
`ui`		`{ base?: ClassNameValue; overlay?: ClassNameValue; content?: ClassNameValue; }`

app.config.ts

export default defineAppConfig({
  ui: {
    prose: {
      img: {
        slots: {
          base: 'rounded-md',
          overlay: 'fixed inset-0 bg-default/75 backdrop-blur-sm will-change-opacity',
          content: 'fixed inset-0 flex items-center justify-center cursor-zoom-out focus:outline-none p-4 sm:p-8'
        },
        variants: {
          zoom: {
            true: 'will-change-transform'
          },
          open: {
            true: ''
          }
        },
        compoundVariants: [
          {
            zoom: true,
            open: false,
            class: 'cursor-zoom-in'
          }
        ]
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        prose: {
          img: {
            slots: {
              base: 'rounded-md',
              overlay: 'fixed inset-0 bg-default/75 backdrop-blur-sm will-change-opacity',
              content: 'fixed inset-0 flex items-center justify-center cursor-zoom-out focus:outline-none p-4 sm:p-8'
            },
            variants: {
              zoom: {
                true: 'will-change-transform'
              },
              open: {
                true: ''
              }
            },
            compoundVariants: [
              {
                zoom: true,
                open: false,
                class: 'cursor-zoom-in'
              }
            ]
          }
        }
      }
    })
  ]
})

Video Embeds

Embed videos from popular platforms like YouTube, Vimeo, and others using standard HTML iframe syntax.

YouTube Videos

<iframe src="https://www.youtube-nocookie.com/embed/_eQxomah-nA?si=pDSzchUBDKb2NQu7" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="aspect-ratio: 16/9; width: 100%;"></iframe>

Interactive Embeds

Embed interactive content like CodeSandbox demos, Figma designs, or other web applications.

CodeSandbox

<iframe src="https://codesandbox.io/p/devbox/nuxt-ui3-n3sxks" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="aspect-ratio: 16/9; width: 100%;"></iframe>

Figma Embeds

<iframe style="border: 1px solid rgba(0, 0, 0, 0.1); width: 100%; height: 450px;" src="https://embed.figma.com/design/LMLLn02QpgdWpmXMUbae8M/%E2%9B%B0%EF%B8%8F---Nuxt-UI-v4?node-id=0-1&embed-host=share" allowfullscreen></iframe>

Lists and Tables

Organize information with styled lists and responsive tables for clear, consistent readability.

Code

Inline code snippets and syntax-highlighted code blocks with copy functionality.