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ファイルを処理することですが、プラグイン（Viteの場合）やローダー（webpackの場合）を通じて、スタイルシート、フォント、SVGなどの他の種類のアセットを処理するように拡張できます。このステップは、主にパフォーマンスやキャッシュの目的（例えば、スタイルシートの圧縮やブラウザキャッシュの無効化）で元のファイルを変換します。

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

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

例

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

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