Nuxt v2(nuxt-edge)プロジェクトで始める

Nuxtをv2(nuxt-edge)を使ってみたら、ビルドの処理速度が明らかに早くなっていました。今回は、Nuxt2でのプロジェクトの始め方について紹介します。

 

nuxtプロジェクトを作成

// vue-cliをインストール

$ npm install -g vue-cli

// nuxtプロジェクトを作成

$ vue init nuxt/starter

 

nuxtのバージョンを2.0.0に変更

packege.jsonのnuxtのバージョンを2.0.0に変更

"nuxt": "^1.0.0"
   ↓
"nuxt": "^2.0.0"

 

パッケージのインストール

$ npm install

ビルド

$ npm run dev

すると、ESLintのloaderが読めていないという以下のようなエラーが起きると思います。

Module build failed: TypeError: Cannot read property 'eslint' of undefined
at Object.module.exports (nuxt-app/node_modules/eslint-loader/index.js:148:18)
You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.

 

nuxt.config.jsのbuildを変更

module.exports = {
  build: {
    extend(config, { isClient, isDev }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
}  

          ↓

module.exports = {
  build: {
    extend(config) {
      if (process.server && process.browser) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
}

 

再びビルド

$ npm run dev

 

Nuxt1.0.0よりビルドがかなり早くなっていると思います。

以下の記事も合わせてご覧ください!

Nuxt.js+Bulmaのレイアウトを爆速で実装する
Nuxt.js+Bulmaの組み合わせがとても使いやすかったので、プロジェクト作成からレイアウト作成までを共有したいと思います。 なぜNuxt.js+Bulmaなのか? Vue.jsベースでフロントエンドを作成するにあたって、b...