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

## 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 }
    ]
  }  
}
```

- [Headに指定できるオプション](https://vue-meta.nuxtjs.org/api/#metainfo-properties)
- [Nuxt.js公式 - head](https://ja.nuxtjs.org/docs/2.x/directory-structure/nuxt-config#head)

## 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](https://ja.nuxtjs.org/docs/2.x/configuration-glossary/configuration-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](https://ja.nuxtjs.org/docs/2.x/configuration-glossary/configuration-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](https://ja.nuxtjs.org/docs/2.x/configuration-glossary/configuration-router)

## srcDir

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

```.js
export default {
  srcDir: 'app/'
}
```
この設定では、`app/` 配下に `components` 、 `pages`、 `plugins` などの主要ファイル郡を設置するといった意味です。

- [Nuxt.js公式 - srcDir](https://ja.nuxtjs.org/docs/2.x/configuration-glossary/configuration-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](https://ja.nuxtjs.org/docs/2.x/configuration-glossary/configuration-server)

## 参考文献
- [Nuxt.js 公式 - nuxt.config](https://ja.nuxtjs.org/docs/2.x/directory-structure/nuxt-config)
- [Headに指定できるオプション](https://vue-meta.nuxtjs.org/api/#metainfo-properties)