【Nuxt.js】nuxt.config.jsには何が書かれているのか #JavaScript

nuxtの設定ファイル「nuxt.config.js」

nuxt.config.js では、下記のようにオプションを設定することができます。

.js

export default {
  オプション: 値
}

head

このオプションで設定した値が、アプリケーション全体のメタタグに反映されます。

.js

export default {
  head: {
    titleTemplate: '%s - Nuxt.js',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Meta description' }
    ]
  }
}

metaタグって？

記事コンテンツの情報を検索エンジンやブラウザに伝えるための情報です。使用言語や文字エンコーディング、キーワードや説明文などについて記述しており、HTMLのhead要素内に配置されるタグのことです。

外部リソース読みこみもここで

第二引数以降に、詳細を指定できる。
async：非同期 defer：遅延 body：</body>の直前に追加

.js

export default {
  head: {
    script: [
      { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js', async: true, defer: true, body: true }
    ]
  }  
}

build

ここで webpack や loaders など build 時の様々な設定を行うことができます。

.js

import Sass from 'sass'
import Fiber from 'fibers'

build: {
   //略
    loaders: {
      scss: {
        implementation: Sass,
        sassOptions: {
          fiber: Fiber,
        }
      }
    }
  }

ここではサンプルとして、 Dart Sass という Sass のコンパイラの設定を書いてます。
fibers はコンパイル速度を向上させるためのライブラリです。

Nuxt.js公式 - build

CSS

グローバルに、全てのページで利用したい CSSファイルやCSSモジュールを指定します。

.js

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

また、配列の２番目のように、 .css .scss といった拡張子を省いてもOKです。

plugins

アプリケーションの初期化前にインポートしたい場合にここに記述。
plugins/ 配下に該当ファイルを置いて、ここに追加します。
引数を指定したい場合、オブジェクト形式で。 mode: 'client' ならクライアント側でのみファイルが読み込まれます。

.js

export default {
  plugins: [
    { src: '~/plugins/both-sides.js' },
    { src: '~/plugins/client-only.js', mode: 'client' }
    { src: '~/plugins/server-only.js', mode: 'server' }
  ]
}

Nuxt.js公式 - plugins

router

nuxtで自動設定されたルートに変更を加えたいときに使います。

.js

export default {
  router: {
    extendRoutes(routes, resolve) {
      routes.push({
        name: 'Not Found',
        path: '*',
        component: resolve(__dirname, '~/pages/errors/404.vue'),
      })
    }
  }
}

ルートを拡張したいときには、 extendRoutes() メソッドが準備されています。

Nuxt.js公式 - router

srcDir

このオプションで、nuxtアプリケーションの「ソースディレクトリ」を設定します。

.js

export default {
  srcDir: 'app/'
}

この設定では、app/ 配下に components 、 pages、 plugins などの主要ファイル郡を設置するといった意味です。

Nuxt.js公式 - srcDir

server

アプリケーションのサーバー接続用の変数を nuxt.config.js 内に定義できます。

.js

export default {
  server: {
    port: 8000, // デフォルト: 3000
    host: '0.0.0.0', // デフォルト: localhost,
    timing: false
  }
}

server.timing オプションを有効にすると、サーバーサイドレンダリング中に経過した時間を計測するミドルウェアが追加され、'Server-Timing' としてヘッダーに追加されます。

Nuxt.js公式 - server

【Nuxt.js】nuxt.config.jsには何が書かれているのか