Images and embeds
Images
Responsive images with automatic optimization and interactive zoom functionality.
| Prop | Default | Type |
|---|---|---|
src |
| |
alt |
| |
width | ||
height |
| |
zoom |
|
Zoom image on click |
ui |
|
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',
zoomedImage: 'w-full h-auto max-w-[95vw] max-h-[95vh] object-contain rounded-md'
},
variants: {
zoom: {
true: 'will-change-transform'
},
open: {
true: ''
}
},
compoundVariants: [
{
zoom: true,
open: false,
class: 'cursor-zoom-in'
}
]
}
}
}
})
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',
zoomedImage: 'w-full h-auto max-w-[95vw] max-h-[95vh] object-contain rounded-md'
},
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.
Size
Images automatically adapt to their container while maintaining aspect ratio. You can control sizing through markdown or HTML attributes when needed.
Iframes
Easily embed interactive content like CodeSandbox, Figma, or YouTube.