Nuxt 設定ファイル

Nuxt ではデフォルトの設定でほとんどのユースケースをカバーしています。nuxt.config.js を使ってこの設定を上書きすることができます。

nuxt.config.js

alias

このオプションで JavaScript や CSS で利用可能なエイリアスを定義できます。

import { resolve } from 'path'

export default {
  alias: {
    'style': resolve(__dirname, './assets/style')
  }
}

build

このオプションで、loaders、filenames や webpack の設定、transpilation を含む build ステップにおけるさまざまな設定を行うことができます。

export default {
  build: {
    /*
     ** ここで webpack の設定を拡張することができます。
     */
    extend(config, ctx) {}
  }
}

css

このオプションで、グローバルに（すべてのページで）利用したい CSS ファイル/モジュール/ライブラリを指定できます。

export default {
  css: ['~/assets/css/main.css', '~/assets/css/animations.scss']
}

nuxt の設定ファイルで、css プロパティの配列に記述する CSS、SCSS、Postcss、Less、Stylus などのファイルの拡張子は省略することができます。

export default {
  css: ['~/assets/css/main', '~/assets/css/animations']
}

拡張子を省略することで、例えば css ファイルを使用していて sass を使うように変更した場合でも、ファイル名が同じままであれば新しい拡張子が使用されるので、nuxt.config を更新する必要はありません。

dev

このオプションで、Nuxt の development または production モードを定義できます。（Nuxt をプログラム上で使う際に重要です）

export default {
  dev: process.env.NODE_ENV !== 'production'
}

env

このオプションを使うと、NODE_ENV=staging や VERSION=1.2.3 のように、ビルド時（ランタイムではなく）に必要な環境変数を定義することができます。ただし、ランタイム環境変数の場合は runtimeConfig が必要です。

export default {
  env: {
    baseURL: process.env.BASE_URL
  }
}

runtimeConfig

ランタイム設定にはより良いセキュリティと高速な開発のため dotenv サポートが組み込まれています。ランタイム設定は Nuxt ペイロードに追加されるので、開発中、サーバーサイドレンダリング、またはクライアントサイドのみのアプリケーションで作業する際に、ランタイム設定を更新するためにリビルドする必要はありません。（静的サイトでは変更を確認するためにサイトをリビルドする必要があります）

.env サポート

もしプロジェクトのルートディレクトリに .env ファイルがあるなら、自動的に process.env にロードされ、nuxt.config / serverMiddleware またはそれらがインポートする別のファイル内からアクセスできます。

--dotenv <file> を使用してパスをカスタマイズすることができ、また --dotenv false を使用して完全に無効にすることができます。例えば本番、ステージング、開発環境で違う .env ファイルを指定することができます。

publicRuntimeConfig

• フロントエンドに公開されるのでパブリックな env 変数はすべて保持しなければなりません。例として公開 URL への参照を含めることができます。
• サーバーとクライアントの両方で $config を使って利用できます。

export default {
  publicRuntimeConfig: {
    baseURL: process.env.BASE_URL || 'https://v2.nuxt.com'
  }
}

privateRuntimeConfig

• プライベートでフロントエンドでは公開されてはいけないすべての env 変数を保持しなければなりません。例として API のシークレットトークンへの参照を含めることができます。
• サーバーのみで同じく $config を使って利用できます。（publicRuntimeConfig を上書きします）

export default {
  privateRuntimeConfig: {
    apiSecret: process.env.API_SECRET
  }
}

設定値を使用する:

ページ、ストア、コンポーネント、プラグインのコンテキストを使って、this.$config や context.$config を使用することで、どこからでもこれらの値にアクセスすることができます。

<script>
  asyncData ({ $config: { baseURL } }) {
    const posts = await fetch(`${baseURL}/posts`)
      .then(res => res.json())
  }
</script>

テンプレートの中では、$config.* を使って直接ランタイム設定にアクセスできます。

<template>
  <p>Our Url is: {{ $config.baseURL}}</p>
</template>

generate

このオプションで、Nuxt によって HTML ファイルに変換されるアプリケーション内のすべての動的ルートのパラメータを設定することができます。

export default {
  generate: {
    dir: 'gh_pages', // dist/ の代わりに gh_pages/ を設定する
    subFolders: false // HTML ファイルがルートパスに従って生成されます
  }
}

head

export default {
    head: {
    title: 'my title',
    meta: [
      { charset: 'utf-8' },
            .....
        ]
    }
}

このオプションで、アプリケーションのデフォルトのメタタグを全て指定できます。

loading

このオプションで、Nuxt のデフォルトのローディングコンポーネントをカスタマイズできます。

export default {
  loading: {
    color: '#fff'
  }
}

modules

このオプションで、プロジェクトに Nuxt モジュールを追加できます。

export default {
  modules: ['@nuxtjs/axios']
}

modulesDir

modulesDir プロパティは、モジュールディレクトリの設定でパス解決のために使用します。例えば Webpack の resolveLoading、 nodeExternals や postcss です。設定パスは options.rootDir （デフォルト: process.cwd()）からの相対パスになります。

export default {
  modulesDir: ['../../node_modules']
}

プロジェクトが Yarn ワークスペーススタイルのモノリポジトリで構成されている場合はこのフィールドが必要になるかもしれません。

plugins

このオプションで、ルートの Vue.js アプリケーションをインスタンス化する前に実行したい JavaScript plugin を指定できます。

export default {
  plugins: ['~/plugins/url-helpers.js']
}

router

`router オプションで、Nuxt のデフォルトの Vue Router 設定を上書きできます。

export default {
  router: {
    linkExactActiveClass: 'text-primary'
  }
}

server

このオプションで、Nuxt アプリケーションのサーバーインスタンスにおける接続変数を設定できます。

import path from 'path'
import fs from 'fs'

export default {
  server: {
    https: {
      key: fs.readFileSync(path.resolve(__dirname, 'server.key')),
      cert: fs.readFileSync(path.resolve(__dirname, 'server.crt'))
    }
  }
}

srcDir

このオプションで、Nuxt アプリケーションのソースディレクトリを指定できます。

export default {
  srcDir: 'client/'
}

client ディレクトリにある Nuxt アプリケーションのプロジェクト構造の例です。

**-| app/
---| node_modules/
---| nuxt.config.js
---| package.json
---| client/
------| assets/
------| components/
------| layouts/
------| middleware/
------| pages/
------| plugins/
------| static/
------| store/**

dir

このオプションで、Nuxt のディレクトリのカスタムネームを指定できます。

export default {
  dir: {
    pages: 'views' // Nuxt は pages/ フォルダの代わりに views/ を探します。
  }
}

pageTransition

このオプションで、ページトランジションのデフォルトプロパティを指定できます。

export default {
  pageTransition: 'page'
}

その他の設定ファイル

nuxt.config.js の他にもプロジェクトのルートに .eslintrc 、prettier.config.json や .gitignore などの設定ファイルがあるかもしれません。これらは linter やコードフォーマッタ、git リポジトリなどの他のツールを設定するために使われ、nuxt.config.js から切り離されています。

.gitignore

.gitignore ファイルに以下の項目を追加して、バージョン管理から無視かつ追加されないようにする必要があります。node_modules フォルダはインストールしたモジュールがすべて入っているフォルダです。nuxt フォルダは、dev コマンドや build コマンドを実行したときに作成されるフォルダです。dist フォルダは generate コマンドの実行時に作成されるフォルダです。

node_modules .nuxt dist

この次は？