Join the Nuxt Team at Frontend Nation 4-7 June.
52.3K

<NuxtPicture>

Source

Nuxt provides a <NuxtPicture> component to handle automatic image optimization.

<NuxtPicture> is a drop-in replacement for the native <picture> tag.

Usage of <NuxtPicture> is almost identical to <NuxtImg> but it also allows serving modern formats like webp when possible.

Learn more about the <picture> tag on MDN.

Setup

In order to use <NuxtPicture> you should install and enable the Nuxt Image module:

Terminal
npx nuxi@latest module add image
Read more about the <NuxtPicture> component.

<NuxtImg>

Nuxt provides a <NuxtImg> component to handle automatic image optimization.

<Teleport>

The <Teleport> component teleports a component to a different location in the DOM.