設定

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

css プロパティ

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

sass を利用したい場合は  node-sasssass-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.scssmain.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> などのためのさまざまなプリプロセッサを使うことができます。

PugSass を使った 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 sass sass-loader@10 fibers
npm install --save-dev pug pug-plain-loader
npm install --save-dev sass sass-loader@10 fibers
fibers がインストールされている場合、 sass の同期コンパイル(2 倍速)が 自動的に有効になります

外部のリソース

グローバルの設定

ヘッドオブジェクトまたは関数に外部リソースを含めることができます。head API のドキュメントで説明したように、次の例ではオブジェクトや関数として head の使い方を示します。もし計算されたプロパティやデータなど、Vue コンポーネントの値を使いたい場合は、 head() 関数を使って最終的な head オブジェクトを返すことができます。オプションの body: true を各リソースに渡して、閉じる </body> タグの前にリソースを含めることもできます。

nuxt.config.js(ここでは head オブジェクト)にリソースを含めます:

export default {
  head: {
    script: [
      {
        src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'
      }
    ],
    link: [
      {
        rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/css?family=Roboto&display=swap'
      }
    ]
  }
}

ローカルの設定

pages/ ディレクトリ(ここでは head 関数)内の .vue ファイルにリソースを含めます:

<template>
  <h1>About page with jQuery and Roboto font</h1>
</template>

<script>
  export default {
    head() {
      return {
        script: [
          {
            src:
              'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'
          }
        ],
        link: [
          {
            rel: 'stylesheet',
            href: 'https://fonts.googleapis.com/css?family=Roboto&display=swap'
          }
        ]
      }
    }
  }
</script>

<style scoped>
  h1 {
    font-family: Roboto, sans-serif;
  }
</style>

PostCSS プラグイン

もし存在する場合、プロジェクトディレクトリにある postcss.config.js の名前を変更するか削除します。そして nuxt.config.js ファイルに以下を追加します:

export default {
  build: {
    postcss: {
      // プラグイン名をキーとして、引数を値として追加します
      // npm または yarn を使って依存関係としてこれらを事前にインストールします
      plugins: {
        // false を値として渡しプラグインを無効にします
        'postcss-url': false,
        'postcss-nested': {},
        'postcss-responsive-type': {},
        'postcss-hexrgba': {}
      },
      preset: {
        // postcss-preset-env の設定を変更します
        autoprefixer: {
          grid: true
        }
      }
    }
  }
}

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>

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

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

ファイルの無視

.nuxtignore

.nuxtignore を使用することで、ビルド時にプロジェクトルート(rootDir)にある layoutpagestore そして 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.jspages/-bar.vue のようなファイルはすべて無視されます。これにより、ルートやストア等に変換されることなく、呼び出し元と同じ場所にテスト、ユーティリティ、コンポーネントなどのファイルを置くことができます。

ignore プロパティ

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

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

ignoreOptions

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

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 設定の検査

複雑なプロジェクトやデバッグの場合、最終的な webpack 構成がどのようになるかを確認すると便利な場合があります。幸い、プロジェクトから nuxt webpack コマンドを実行して設定を出力できます。詳細については、#7029 の PR を確認してください。

webpack プラグインの追加

nuxt.config.js ファイルの build オプションを使うと、webpack.config.js ファイルと同じ方法で webpack plugins を渡すことができます。

この例では JavaScript モジュール(lodashjQuery)を importrequire するかわりに自動的にロードする webpack ビルトインの ProvidePluginを追加します。

import webpack from 'webpack'

export default {
  build: {
    plugins: [
      new webpack.ProvidePlugin({
        // グローバルモジュール
        $: 'jquery',
        _: 'lodash'
      })
    ]
  }
}

注意: Vue ベースのアプリケーションでは jQuery は必要ないかもしれません。

Nuxt を使うと、プラグインの実行コンテキストを制御することもできます。もしプラグインが build.extend 内の client または server ビルド(または dev ビルドと prod ビルドを区別する)で実行されることを意図している場合 、webpack プラグインを手動で渡すこともできます。

Webpack を拡張してオーディオファイルをロードする

オーディオファイルは file-loader で処理する必要があります。このローダーはすでにデフォルトの Webpack 設定に含まれていますが、オーディオファイルを処理するように設定されていません。nuxt.config.js でデフォルトの設定を拡張する必要があります:

export default {
  build: {
    extend(config, ctx) {
      config.module.rules.push({
        test: /\.(ogg|mp3|wav|mpe?g)$/i,
        loader: 'file-loader',
        options: {
          name: '[path][name].[ext]'
        }
      })
    }
  }
}

これでオーディオファイルを <audio :src="require('@/assets/water.mp3')" controls></audio> のようにインポートできます。

<audio src="@/assets/water.mp3" controls></audio> だけ書きたい場合、src 属性でこれらを参照する際に vue-loader に自動的にオーディオファイルを要求するように支持する必要があります:

export default {
  build: {
    loaders: {
      vue: {
        transformAssetUrls: {
          audio: 'src'
        }
      }
    },

    extend(config, ctx) {
      config.module.rules.push({
        test: /\.(ogg|mp3|wav|mpe?g)$/i,
        loader: 'file-loader',
        options: {
          name: '[path][name].[ext]'
        }
      })
    }
  }
}

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

デフォルトでは、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
      //... 残りの設定
    }
  }
}

nuxt.config.js 内で axios-module を使うことはできません。axios をインポートして再度設定する必要があります。

さらなる設定

nuxt.config.js には、カスタマイズや設定オプションがたくさんあります!build の設定ですべてのキーを確認しましょう。

間違いを見つけた、またはドキュメントに貢献したいですか? GitHub でこのページを編集する