アセット

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

public/ ディレクトリの内容は、サーバールートでそのまま提供されます。
assets/ ディレクトリには、ビルドツール（Viteまたはwebpack）で処理する必要のあるすべてのアセットが含まれています。

Publicディレクトリ

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

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

例

たとえば、静的URL /img/nuxt.png で利用可能な public/img/ ディレクトリの画像ファイルを参照します。

app.vue

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

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

慣例により、Nuxtはassets/ ディレクトリにこれらのファイルを保存しますが、このディレクトリを自動スキャンする機能はありません。別の名前を使用することもできます。

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

例

たとえば、ビルドツールがファイル拡張子を処理するように構成されている場合に処理される画像ファイルを参照します。

app.vue

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

Nuxtは、/assets/my-file.pngのような静的URLでassets/ディレクトリ内のファイルを提供しません。静的URLが必要な場合は、public/ディレクトリを使用してください。

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

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

例

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

$primary: #49240F;
$secondary: #E4A79D;

あなたのnuxt.configで

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

ビュー

Nuxtは、アプリケーションのユーザーインターフェースを実装するためのいくつかのコンポーネントレイヤーを提供します。

スタイル設定

Nuxtアプリケーションのスタイル設定方法について説明します。

Publicディレクトリ

例

Assetsディレクトリ

例

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

例