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

• public/ ディレクトリの内容は、そのままの状態でサーバールートで提供されます。
• 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は assets/ ディレクトリをこれらのファイルを格納するために使用しますが、このディレクトリには自動スキャン機能はなく、任意の他の名前を使用することもできます。

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

実装例

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

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