---
title: "Images and embeds"
description: "Responsive images, videos, and rich media embeds to enhance and illustrate your documentation."
canonical_url: "https://ui.nuxt.com/docs/typography/images-and-embeds"
last_updated: "2026-05-07"
---
# Images and embeds

> Responsive images, videos, 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)

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

```ts [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',
          zoomedImage: 'w-full h-auto max-w-[95vw] max-h-[95vh] object-contain rounded-md'
        },
        variants: {
          zoom: {
            true: 'will-change-transform'
          },
          open: {
            true: ''
          },
          width: {
            false: 'w-full'
          }
        },
        compoundVariants: [
          {
            zoom: true,
            open: false,
            class: 'cursor-zoom-in'
          }
        ]
      }
    }
  }
})
```

**Nuxt:**

> [!NOTE]
> 
> If [`@nuxt/image`](https://image.nuxt.com/get-started/installation) 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.

```vue
<template>
  <p>
  <img alt=Image without zoom src=/assets/templates/nuxt/dashboard-dark.png :zoom=false /></p>
  <template v-slot:code=>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=![Image without zoom](/assets/templates/nuxt/dashboard-dark.png){:zoom="false"}
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sMK4o>
  ![</span>
  <span class=sfazB>
  Image without zoom</span>
  <span class=sMK4o>
  ](</span>
  <span class=sQLHv>
  /assets/templates/nuxt/dashboard-dark.png</span>
  <span class=sMK4o>
  )</span>
  <span class=sTEyZ>
  {:zoom="false"}
  </span></span></code></pre></template>
</template>
```

### Size

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

```vue
<template>
  <p>
  <img alt=Small Image src=/assets/templates/nuxt/dashboard-dark.png /></p>
  <template v-slot:code=>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=![Small Image](/assets/templates/nuxt/dashboard-dark.png){width="300"}
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sMK4o>
  ![</span>
  <span class=sfazB>
  Small Image</span>
  <span class=sMK4o>
  ](</span>
  <span class=sQLHv>
  /assets/templates/nuxt/dashboard-dark.png</span>
  <span class=sMK4o>
  )</span>
  <span class=sTEyZ>
  {width="300"}
  </span></span></code></pre></template>
</template>
```

## Iframes

Easily embed interactive content like CodeSandbox, Figma, or YouTube.

### YouTube

```vue
<template>
  <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 style=aspect-ratio: 16/9; width: 100%; />
  <template v-slot:code=>
  <pre className=language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=<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>
   language=html meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sMK4o>
  <</span>
  <span class=swJcz>
  iframe</span>
  <span class=spNyl>
   src</span>
  <span class=sMK4o>
  =</span>
  <span class=sMK4o>
  "</span>
  <span class=sfazB>
  https://www.youtube-nocookie.com/embed/_eQxomah-nA?si=pDSzchUBDKb2NQu7</span>
  <span class=sMK4o>
  "</span>
  <span class=spNyl>
   title</span>
  <span class=sMK4o>
  =</span>
  <span class=sMK4o>
  "</span>
  <span class=sfazB>
  YouTube video player</span>
  <span class=sMK4o>
  "</span>
  <span class=spNyl>
   frameborder</span>
  <span class=sMK4o>
  =</span>
  <span class=sMK4o>
  "</span>
  <span class=sfazB>
  0</span>
  <span class=sMK4o>
  "</span>
  <span class=spNyl>
   allow</span>
  <span class=sMK4o>
  =</span>
  <span class=sMK4o>
  "</span>
  <span class=sfazB>
  accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share</span>
  <span class=sMK4o>
  "</span>
  <span class=spNyl>
   referrerpolicy</span>
  <span class=sMK4o>
  =</span>
  <span class=sMK4o>
  "</span>
  <span class=sfazB>
  strict-origin-when-cross-origin</span>
  <span class=sMK4o>
  "</span>
  <span class=spNyl>
   allowfullscreen</span>
  <span class=spNyl>
   style</span>
  <span class=sMK4o>
  =</span>
  <span class=sMK4o>
  "</span>
  <span class=sfazB>
  aspect-ratio: 16/9; width: 100%;</span>
  <span class=sMK4o>
  "</span>
  <span class=sMK4o>
  ></</span>
  <span class=swJcz>
  iframe</span>
  <span class=sMK4o>
  >
  </span></span></code></pre></template>
</template>
```

### CodeSandbox

```vue
<template>
  <iframe src=https://codesandbox.io/p/devbox/nuxt-ui-xgrzw5 frameBorder=0 allow=accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share referrerPolicy=strict-origin-when-cross-origin style=aspect-ratio: 16/9; width: 100%; />
  <template v-slot:code=>
  <pre className=language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=<iframe src="https://codesandbox.io/p/devbox/nuxt-ui-xgrzw5" 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>
   language=html meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sMK4o>
  <</span>
  <span class=swJcz>
  iframe</span>
  <span class=spNyl>
   src</span>
  <span class=sMK4o>
  =</span>
  <span class=sMK4o>
  "</span>
  <span class=sfazB>
  https://codesandbox.io/p/devbox/nuxt-ui-xgrzw5</span>
  <span class=sMK4o>
  "</span>
  <span class=spNyl>
   frameborder</span>
  <span class=sMK4o>
  =</span>
  <span class=sMK4o>
  "</span>
  <span class=sfazB>
  0</span>
  <span class=sMK4o>
  "</span>
  <span class=spNyl>
   allow</span>
  <span class=sMK4o>
  =</span>
  <span class=sMK4o>
  "</span>
  <span class=sfazB>
  accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share</span>
  <span class=sMK4o>
  "</span>
  <span class=spNyl>
   referrerpolicy</span>
  <span class=sMK4o>
  =</span>
  <span class=sMK4o>
  "</span>
  <span class=sfazB>
  strict-origin-when-cross-origin</span>
  <span class=sMK4o>
  "</span>
  <span class=spNyl>
   allowfullscreen</span>
  <span class=spNyl>
   style</span>
  <span class=sMK4o>
  =</span>
  <span class=sMK4o>
  "</span>
  <span class=sfazB>
  aspect-ratio: 16/9; width: 100%;</span>
  <span class=sMK4o>
  "</span>
  <span class=sMK4o>
  ></</span>
  <span class=swJcz>
  iframe</span>
  <span class=sMK4o>
  >
  </span></span></code></pre></template>
</template>
```

### Figma

```vue
<template>
  <iframe style=border: 1px solid rgba(0, 0, 0, 0.1); width: 100%; height: 450px; src=https://embed.figma.com/file/1544369209862884086/hf_embed?community_viewer=true&embed_host=fastma&fuid=960610330589944894&kind=file&page-selector=0&viewer=1 />
  <template v-slot:code=>
  <pre className=language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=<iframe style="border: 1px solid rgba(0, 0, 0, 0.1); width: 100%; height: 450px;" src="https://embed.figma.com/file/1544369209862884086/hf_embed?community_viewer=true&embed_host=fastma&fuid=960610330589944894&kind=file&page-selector=0&viewer=1" allowfullscreen></iframe>
   language=html meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sMK4o>
  <</span>
  <span class=swJcz>
  iframe</span>
  <span class=spNyl>
   style</span>
  <span class=sMK4o>
  =</span>
  <span class=sMK4o>
  "</span>
  <span class=sfazB>
  border: 1px solid </span>
  <span class=swNtp>
  rgba(0, 0, 0, 0.1)</span>
  <span class=sfazB>
  ; width: 100%; height: 450px;</span>
  <span class=sMK4o>
  "</span>
  <span class=spNyl>
   src</span>
  <span class=sMK4o>
  =</span>
  <span class=sMK4o>
  "</span>
  <span class=sfazB>
  https://embed.figma.com/file/1544369209862884086/hf_embed?community_viewer=true&embed_host=fastma&fuid=960610330589944894&kind=file&page-selector=0&viewer=1</span>
  <span class=sMK4o>
  "</span>
  <span class=spNyl>
   allowfullscreen</span>
  <span class=sMK4o>
  ></</span>
  <span class=swJcz>
  iframe</span>
  <span class=sMK4o>
  >
  </span></span></code></pre></template>
</template>
```


## Sitemap

See the full [sitemap](/sitemap.md) for all pages.