設定
Nuxt.js ではデフォルトの設定でほとんどのユースケースをカバーしています。nuxt.config.js を使ってこの設定を上書きすることができます。
css プロパティ
グローバルに(すべてのページで)適用したい CSS ファイル/モジュール/ライブラリを設定できます。
sass
を利用したい場合は node-sass
と sass-loader
パッケージをインストールしてください。
nuxt.config.js
内で CSS リソースを追加するには:
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/ などのファイルの拡張子は省略することができます。
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
の例:
<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 パターンです。
# 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 パターンと一致するすべてのファイルがビルド時に無視されます。
export default {
ignore: 'pages/bar.vue'
}
ignoreOptions
nuxtignore
は内部で node-ignore
を使用しています。ignoreOptions
は node-ignore
の options
として設定されます。
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 }
。
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 回はサーバーのバンドルのためです。
チャンク設定をカスタマイズする
デフォルトのオブジェクトを書き換えずに 最適化構成 を微調整することができます。
export default {
build: {
extend(config, { isClient }) {
if (isClient) {
config.optimization.splitChunks.maxSize = 200000
}
}
}
}
開発環境のすべての webpack ビルドで ESLint を実行する
コードスタイルエラーに気づくために、開発環境のすべてのビルドで ESLint を実行することができます。
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 に割り振られます。
export default {
server: {
host: '0' // デフォルト: localhost
}
}
ポート番号をデフォルトの 3000 から変更することもできます。
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 オブジェクトを返却する非同期な関数をエクスポートすることで非同期な設定をすることができます。
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 の設定ですべてのキーを確認しましょう。