最終更新日: 2023年08月15日

設定

デフォルトでは、Nuxtはほとんどのケースをカバーできるように設定されています。nuxt.config.tsファイルの設定をカスタマイズすることで、設定を上書き or 拡張することができます。

Nuxtの設定

nuxt.config.tsファイルは、Nuxtプロジェクトのルート（ディレクトリ直下）に配置されており、アプリケーションの動作を上書き or 拡張することができます。

defineNuxtConfig関数の中に記述することで、設定値をカスタマイズできます。 またdefineNuxtConfigは、インポートなしでグローバルに利用できます。

  • nuxt.config.ts
  • ts
// defineNuxtConfigには各種CSSやモジュールなどがインポートできる。

export default defineNuxtConfig({
  // My Nuxt config
});
  • nuxt.config.ts
  • ts
// 下記は記述の事例です。

export default defineNuxtConfig({

  // devtool有効化
  devtools: { enabled: true },

  // モジュールの有効化
  modules: ["@nuxt/devtools", "@nuxt/content"],

  // コンポーネントの有効化
  components: [
    {
      path: "~/components",
      global: true,
    },
  ],

  // コンテンツ内のマークダウンのハイライトを有効化
  content: {
    // 詳細ページ：https://content.nuxtjs.org/api/configuration/
    highlight: {
      // テーマ設定
      theme: "dark-plus",
    },
  },

  // ページディレクトリ有効化
  pages: true,

  // assets内のCSS有効化
  // ここで有効化したcssファイルは、全ページで有効化される
  css: [
    "~/assets/css/main.css", 
    "~/assets/css/destyle.css"
  ],

  // Tailwind CSSの有効化
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
  app: {
    // ページ遷移のトランジション有効化
    pageTransition: {
      name: "page",
      mode: "out-in",
    },
    // ページヘッダー内の title / meta を有効化
    head: {
      title: "Nuxt3 Guide JP",
      meta: [
        { charset: "utf-8" },
        { name: "viewport", content: "width=device-width, initial-scale=1.0" },
        { name: "description", content: "Nuxt3 リファレンスガイド 日本語版" },
      ],
      link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
    },
  },

  // vite（ヴィート）のデバックOFF
  vite: {
    define: {
      "process.env.DEBUG": false,
    },
  },
});

このファイルはドキュメンテーションで頻繁に登場します。 たとえば、カスタムスクリプトの追加やモジュールの登録、レンダリングモードの変更などのために使用されます。

Info 全ての設定オプションは 設定リファレンスに詳細に記載されています。

環境の上書き（オーバーライド）

nuxt.configでは、環境に合わせて設定をオーバーライドさせることができます。

  • nuxt.config.ts
  • ts
export default defineNuxtConfig({
  $production: {
    routeRules: {
      "/**": { isr: true },
    },
  },
  $development: {
    //
  },
});

環境変数とプライベートトークン

runtimeConfigAPIは、環境変数のような値をアプリケーション全体に公開します。 デフォルトでは、これらのキーはサーバーサイドでのみ利用可能です。 runtimeConfig.public内のキーはクライアントサイドでも利用可能です。

それらの値はnuxt.configで定義する必要があり、環境変数を使用して上書きすることもできます。

  • nuxt.config.ts
  • ts
export default defineNuxtConfig({
  runtimeConfig: {
    // サーバーサイドでのみ利用可能な秘密鍵
    apiSecret: "123",
    // public内のキーはクライアント側でも公開されます
    public: {
      apiBase: "/api",
    },
  },
});

useRuntimeConfigを使用することで、これらの変数はアプリケーション全体に公開されます。

  • pages/index.vue
  • ts
<script setup>
    const runtimeConfig = useRuntimeConfig()
</script>

Info 詳細については、「ガイド」>「さらに進む」>「ランタイム設定」をご覧ください。

App設定

sourceディレクトリにあるapp.config.tsファイル（デフォルトではプロジェクトのルート）は、ビルド時に決定できるパブリックな変数を公開するために使用されます。runtimeConfigオプションとは異なり、これらは環境変数を使用して上書きすることはできません。

最小限の設定ファイルは、設定を含むオブジェクトを含むdefineAppConfig関数をエクスポートします。defineAppConfigは、インポートせずにグローバルに利用できます。

  • app.config.ts
  • ts
export default defineAppConfig({
  title: 'Hello Nuxt',
  theme: {
    dark: true,
    colors: {
      primary: '#ff0000'
    }
  }
})

useAppConfigコンポーザブルを使用することで、これらの変数はアプリケーションの他の部分に公開されます。

  • pages/index.vue
  • ts
<script setup>
  const appConfig = useAppConfig()
</script>

Info 詳細については、「ガイド」>「ディレクトリ構造」>「アプリケーション設定」をご覧ください。

runtimeConfig vs app.config

前述の通り、runtimeConfigとapp.configはどちらもアプリケーションの他の部分に変数を公開するために使用されます。 どちらを使用するかを決定するために、以下にいくつかのガイドラインを示します。

  • untimeConfigr: ビルド後に環境変数を使用して指定する必要がある、プライベートまたはパブリックなトークン。
  • pp.configa: ビルド時に決定されるパブリックなトークン、テーマのバリアント、タイトル、および機密情報ではないプロジェクト設定など、ウェブサイトの設定情報。

外部設定ファイル

Nuxtは、設定情報の信頼性を確保するためにnuxt.config.tsファイルを使用し、外部の設定ファイルの読み込みをスキップします。 ただし、プロジェクトを構築する過程で、それらを設定する必要が生じる場合もあります。 以下の表は、一般的な設定をハイライトしており、適用される場合には、Nuxtでどのように設定できるかを示しています。

NameConfigファイル設定方法
Nitronitro.config.tsnuxt.config.tsでvite keyを使用
PostCSSnitro.config.tsnuxt.config.tsでvite keyを使用
Vitenitro.config.tsnuxt.config.tsでvite keyを使用
webpacknitro.config.tsnuxt.config.tsでvite keyを使用

以下は、他の一般的な設定ファイルのリストです:

NameConfigファイル設定方法
TypeScriptnitro.config.tsMore Info
ESLint.eslintrc.jsMore Info
Prettier.prettierrc.jsonMore Info
Stylelint.stylelintrc.jsonMore Info
TailwindCSStailwind.config.jsMore Info
Vitestvitest.config.tsMore Info

Vueの設定

Viteについて

@vitejs/plugin-vueや@vitejs/plugin-vue-jsxにオプションを渡す必要がある場合は、uxt.confignファイルで行うことができます。

  • @vitejs/plugin-vueの場合、vite.vueオプションを使用します。詳細なオプションについては、こちらをご確認ください。
  • @vitejs/plugin-vue-jsxの場合、vite.vueJsxオプションを使用します。詳細なオプションについては、こちらをご確認ください。
  • app.config.ts
  • ts
export default defineNuxtConfig({
  vite: {
    vue: {
      customElement: true,
    },
    vueJsx: {
      mergeProps: true,
    },
  },
});

Info 詳細については、「ガイド」>「ディレクトリ構造」>「Nuxt Config」をご覧ください。

webpackについて

もしwebpackを使用しており、vue-loaderを設定する必要がある場合は、 nuxt.configファイル内のwebpack.loaders.vueキーを使用して設定することができます。利用可能なオプションについては、こちらで定義されています。

  • app.config.ts
  • ts
export default defineNuxtConfig({
  webpack: {
    loaders: {
      vue: {
        hotReload: true,
      },
    },
  },
});

Info もっと詳しく知りたい場合は、「ガイド」>「ディレクトリ構造」>「Nuxt Config #loaders」

実験的なVueの機能を有効にする

Vueの実験的な機能であるdefineModelやpropsDestructureなどを有効にする必要がある場合、Nuxtではnuxt.config.tsファイルで簡単にそれを行うことができます。どのビルダーを使用しているかにかかわらず、以下のような方法があります。

  • app.config.ts
  • ts
export default defineNuxtConfig({
  vue: {
    defineModel: true,
    propsDestructure: true,
  },
});

Info もっと詳しく知りたい場合は、「ガイド」>「ディレクトリ構造」>「Nuxt Config #vue 1」