アセット

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

• public/ディレクトリのコンテンツは、そのままサーバールートで提供されます。
• assets/ディレクトリには、ビルドツール（Viteまたはwebpack）に処理させたいすべてのアセットが一般的に格納されます。

public/ ディレクトリ

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

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

例

下記の例では、public/img/ディレクトリ内の画像ファイルを参照する場合、そのファイルはimg/nuxt.png で利用できます。

// publicディレクトリ直下に「img」フォルダを作成し、png画像を配置した例

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

assets/ ディレクトリ

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

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

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

例

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

// assetsフォルダには、img や css のフォルダを作成し、その中に必要なファイルを配置する。

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

グローバルスタイルのインポート

Nuxtのコンポーネントスタイルにグローバルなステートメントを挿入するためには、nuxt.config.tsファイルでViteオプションを使用することができます。

例

この例では、Nuxtのページやコンポーネントで使用されるカラー変数を含むSassのパーシャルファイルがあります。

$primary: #49240f;
$secondary: #e4a79d;

export default defineNuxtConfig({
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@use "@/assets/_colors.scss" as *;'
        }
      }
    }
  }
})