<NuxtPicture>

Nuxt は、自動画像最適化を処理するための <NuxtPicture> コンポーネントを提供します。

<NuxtPicture> は、ネイティブの <picture> タグのドロップイン代替品です。

<NuxtPicture> の使用方法は <NuxtImg> とほぼ同じですが、可能な場合は webp のようなモダンな形式も提供できます。

セットアップ

<NuxtPicture> を使用するには、Nuxt Image モジュールをインストールして有効にする必要があります。

ターミナル

npx nuxt module add image

<NuxtPicture> コンポーネントの詳細については、こちらをご覧ください。

お役に立ちましたか？

Nuxt は、子コンポーネントのいずれかが SSR でエラーをトリガーした場合に、そのコンテンツをクライアントでレンダリングするための <NuxtClientFallback> コンポーネントを提供します。

<Teleport> コンポーネントは、DOM 内の別の場所にコンポーネントをテレポートします。