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.
| Prop | Default | Type |
|---|---|---|
src |
| |
alt |
| |
width |
| |
height |
| |
zoom |
|
Zoom image on click |
ui |
|
app.config.ts
export default defineAppConfig({
ui: {
prose: {
img: {
slots: {
base: 'rounded-md w-full',
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 w-full',
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'
}
]
}
}
}
})
]
})
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.
{:zoom="false"}
Size
Images automatically adapt to their container while maintaining aspect ratio. You can control sizing through markdown or HTML attributes when needed.
{width="300"}
Iframes
Easily embed interactive content like CodeSandbox, Figma, or YouTube.
YouTube
<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>
CodeSandbox
<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>
Figma
<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>