Изучите Nuxt с коллекцией из 100+ советов!

<NuxtPicture>

Nuxt предоставляет компонент <NuxtPicture> для автоматической оптимизации изображений.

<NuxtPicture> - это прямая замена нативного тега <picture>.

Использование <NuxtPicture> практически идентично <NuxtImg>, но также, когда это возможно, позволяет использовать современные форматы, такие как webp.

Узнайте больше о теге <picture> в MDN.

Настройка

Для того чтобы использовать <NuxtPicture>, вам необходимо установить и включить модуль Nuxt Image:

Terminal
npx nuxi@latest module add image
Узнать больше о компоненте <NuxtPicture>.