アセット

Nuxt はスタイルシート、フォント、画像などのアセットを扱うために 2 つのディレクトリを使用します。

• public/ ディレクトリの内容は、そのままサーバーのルートで提供されます。
• app/assets/ ディレクトリには、慣例としてビルドツール (Vite または webpack) が処理することを意図するすべてのアセットが含まれます。

Public ディレクトリ

public/ ディレクトリは、アプリケーションの定義された URL で公開される静的アセットの公開サーバーとして使用されます。

アプリケーションのコードまたはブラウザから、ルート URL / で public/ ディレクトリ内のファイルを取得できます。

例

例えば、public/img/ ディレクトリにある画像ファイルを、静的 URL /img/nuxt.png で参照する場合

<template>
  <img
    src="/img/nuxt.png"
    alt="Discover Nuxt"
  >
</template>

Assets ディレクトリ

Nuxt はVite(デフォルト) またはwebpackを使用してアプリケーションをビルドおよびバンドルします。これらのビルドツールの主な機能は JavaScript ファイルを処理することですが、plugins(Vite の場合) またはローダー(webpack の場合) を通じて拡張することで、スタイルシート、フォント、SVG などの他の種類のアセットも処理できます。このステップでは、主にパフォーマンスやキャッシングの目的で元のファイルを変換します (スタイルシートの圧縮やブラウザキャッシュの無効化など)。

慣例として、Nuxt はこれらのファイルを保存するために app/assets/ ディレクトリを使用しますが、このディレクトリには自動スキャン機能はなく、他の任意の名前を使用できます。

アプリケーションのコードでは、app/assets/ ディレクトリにあるファイルを ~/assets/ パスを使用して参照できます。

例

例えば、ビルドツールがこのファイル拡張子を処理するように設定されている場合に処理される画像ファイルを参照する場合

<template>
  <img
    src="~/assets/img/nuxt.png"
    alt="Discover Nuxt"
  >
</template>