設定

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

css プロパティ

グローバルに（すべてのページで）適用したい CSS ファイル/モジュール/ライブラリを設定できます。

sass を利用したい場合は node-sass と sass-loader パッケージをインストールしてください。

nuxt.config.js 内で CSS リソースを追加するには:

nuxt.config.js

export default {
  css: [
    // Node.js モジュールを直接ロードする（ここでは Sass ファイル）
    'bulma',
    // プロジェクト内の CSS ファイル
    '~/assets/css/main.css',
    // プロジェクト内の SCSS ファイル
    '~/assets/css/main.scss'
  ]
}

Nuxt.js は拡張子から自動的にファイルタイプを推測して Webpack の適切なプリプロセッサローダを使用します。それらを使用する場合は各自で必要なローダをインストールしてください。

スタイルの拡張

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

nuxt.config.js

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

main.scss と main.css のような同じ名前の 2 つのファイルが存在し、css: ['~/assets/css/main'] のように css 配列中で拡張子を明示しなかった場合、styleExtensions の順番に応じて 1 つのファイルだけが読み込まれます。このケースの場合、css がデフォルトの styleExtension の配列の中で最初に登場するため、css ファイルだけが読み込まれ scss ファイルは無視されます。

デフォルトの順番: ['css', 'pcss', 'postcss', 'styl', 'stylus', 'scss', 'sass', 'less']

プリプロセッサ

Vue Loader のおかげで、lang 属性を使うだけで <template> や <style> などのためのさまざまなプリプロセッサを使うことができます。

Pug と Sass を使った pages/index.vue の例:

pages/index.vue

<template lang="pug"> h1.red Hello {{ name }}! </template>

<style lang="scss">
  .red {
    color: red;
  }
</style>

これらのプリプロセッサを使うために Webpack のローダをインストールする必要があります:

yarn add -D pug pug-plain-loader
yarn add -D node-sass sass-loader

npm install --save-dev pug pug-plain-loader
npm install --save-dev node-sass sass-loader

JSX

Nuxt.js は babel のデフォルトの設定用の公式の @vue/babel-preset-app に基づいた @nuxt/babel-preset-app を使用しています。そのため、コンポーネントに JSX を使うことができます。

コンポーネントの render メソッド内で JSX が使えます:

<script>
export default {
  data () {
    return { name: 'World' }
  },
  render (h) {
    return <h1 class="red">{this.name}</h1>
  }
}
</script>

createElement を h にエイリアスすることは、Vue のエコシステムで見られる共通の慣例です。しかしその慣例は JSX では任意です。なぜなら ES2015 の構文で宣言された（関数またはアロー関数ではない）JSX で書かれた任意のメソッドやゲッターには const h = this.$createElement が自動的にインジェクトされるためです。よって (h) パラメータは削除することができます。

JSX の使い方をより深く理解するには Vue.js ドキュメントの JSX のセクションを参照してください。

ファイルの無視

.nuxtignore

.nuxtignore を使用することで、ビルド時にプロジェクトルート（rootDir）にある layout、page、store そして middleware のファイルを Nuxt.js に無視させることができます。.nuxtignore ファイルは .gitignore や .eslintignore と同じ仕様に従います。各行はどのファイルを無視するかを示す glob パターンです。

.nuxtignore

# foo.vue レイアウトを無視する

layouts/foo.vue

# ファイル名が -ignore.vue で終わるレイアウトファイルを無視する

layouts/\*-ignore.vue

# bar.vue ページを無視する

pages/bar.vue

# ignore フォルダにあるページを無視する

pages/ignore/\*.vue

# bar.js ストアを無視する

store/baz.js

# _.test._ にマッチするストアファイルを無視する

store/ignore/_.test._

# foo フォルダにある foo/bar.js 以外のミドルウェアファイルと無視する

middleware/foo/\*.js !middleware/foo/bar.js

ignorePrefix プロパティ

pages/、layout/、middleware/ や store/ ディレクトリに含まれる、ファイル名が ignorePrefix プロパティで指定された接頭辞から始まっているファイルはビルド時に無視されます。

デフォルトでは - から始まる store/-foo.js や pages/-bar.vue のようなファイルはすべて無視されます。これにより、ルートやストア等に変換されることなく、呼び出し元と同じ場所にテスト、ユーティリティ、コンポーネントなどのファイルを置くことができます。

ignore プロパティ

ignorePrefix よりカスタマイズしやすいです: ignore プロパティに指定した glob パターンと一致するすべてのファイルがビルド時に無視されます。

nuxt.config.js

export default {
  ignore: 'pages/bar.vue'
}

ignoreOptions

nuxtignore は内部で node-ignore を使用しています。ignoreOptions は node-ignore の options として設定されます。

nuxt.config.js

export default {
  ignoreOptions: {
    ignorecase: false
  }
}

webpack config を拡張する

nuxt.config.js 内の extend オプションを通して nuxt の webpack 設定を拡張できます。build プロパティの extend オプションは 2 つの引数を受け取る関数です。第一引数は nuxt の webpack 設定からエクスポートされた webpack config オブジェクトです。第二引数はこれらの Boolean 型のプロパティを持つ context オブジェクトです: { isDev, isClient, isServer, loaders }。

nuxt.config.js

export default {
  build: {
    extend(config, { isDev, isClient }) {
      // ..
      config.module.rules.push({
        test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
        loader: 'file-loader'
      })
      // `isDev` が true の場合、webpack を開発モードに設定します。
      if (isDev) {
        config.mode = 'development'
      }
    }
  }
}

extend メソッドは 2 回呼び出されます - 1 回目はクライアントのバンドルため、もう 1 回はサーバーのバンドルのためです。

チャンク設定をカスタマイズする

デフォルトのオブジェクトを書き換えずに最適化構成を微調整することができます。

nuxt.config.js

export default {
  build: {
    extend(config, { isClient }) {
      if (isClient) {
        config.optimization.splitChunks.maxSize = 200000
      }
    }
  }
}

開発環境のすべての webpack ビルドで ESLint を実行する

コードスタイルエラーに気づくために、開発環境のすべてのビルドで ESLint を実行することができます。

nuxt.config.js

export default {
  build: {
    extend(config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
}

ホストとポート番号を編集する

デフォルトでは、Nuxt.js の開発サーバーのホストは localhost（ホストマシン内からのみアクセス可能）です。アプリケーションを他のデバイスで確認するにはホストを修正する必要があります。nuxt.config.js ファイルでホストを修正することができます。

ホストの '0.0.0.0' は、ホストマシンの外部からの接続（例えば LAN）でもアクセスが可能なホストアドレスを解決するように Nuxt.js に指示します。ホストに '0'（0 ではありません）や '0.0.0.0' という文字列が指定された場合、ローカル IP アドレスが Nuxt.js に割り振られます。

nuxt.config.js

export default {
  server: {
    host: '0' // デフォルト: localhost
  }
}

ポート番号をデフォルトの 3000 から変更することもできます。

nuxt.config.js

export default {
  server: {
    port: 8000 // デフォルト: 3000
  }
}

ポート番号に '0'（0 ではなく falsy）という文字列の値が指定された場合、ランダムなポートが Nuxt.js アプリケーションに割り振られます。

nuxt.config.js ファイル内で変更することはできますが、サイトをホスティングする際に問題が発生する場合があるのでおすすめしません。dev コマンドで直接ホストとポートを指定することをおすすめします。

HOST=0 PORT=8000 npm run dev

または package.json 内でスクリプトを作成します。

"scripts": {
  "dev:host": "nuxt --hostname '0' --port 8000"
}

非同期な設定

通常の export default {} を使用した設定をするのが望ましいですが、config オブジェクトを返却する非同期な関数をエクスポートすることで非同期な設定をすることができます。

nuxt.config.js

import axios from 'axios'

export default async () => {
  const data = await axios.get('https://api.nuxtjs.dev/posts')
  return {
    head: {
      title: data.title
      //... 残りの設定
    }
  }
}