Images and Embeds

Responsive images with zoom functionality and rich media embeds for interactive content.

Visual and interactive content enhances documentation by providing context, breaking up text, and illustrating concepts. Nuxt UI provides optimized image handling with zoom functionality and support for rich media embeds like videos and interactive elements.

Images

Responsive images with automatic optimization and interactive zoom functionality.

![Nuxt Social Image](https://nuxt.com/new-social.jpg)

Image Zoom

Images include built-in zoom functionality by default. When users click on an image, it opens in a modal overlay with smooth zoom transitions, providing an enhanced viewing experience for detailed content.

The image zoom feature works automatically with all images in your content - no additional configuration required.

Image Optimization

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

Image Sizing

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

![Small Image](https://nuxt.com/new-social.jpg){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

Organized lists and structured tables with consistent styling and proper spacing.

Code

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