設定

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

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

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

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

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'
      }
    ]
  }
}

<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>

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

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

# 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

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

export default {
  ignoreOptions: {
    ignorecase: false
  }
}

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'
      }
    }
  }
}

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

import webpack from 'webpack'

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

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]'
        }
      })
    }
  }
}

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]'
        }
      })
    }
  }
}

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

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

HOST=0 PORT=8000 npm run dev

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

import axios from 'axios'

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