2018.09.24 2019.01.02

本ブログのNuxt.jsのバージョンをv2.0.0にアップグレードする

本ブログのNuxt.jsのバージョンをv2.0.0にアップグレードしていきます。その際の手順になります。

Nuxt.js

フロントエンド

[ 目次 ]

はじめに
インストール済みのNuxt.jsを削除
Nuxt.js v2をインストール

eslintの設定変更

最後に
追記（2018/10/09）

はじめに

こんばんは、香港に住んでいるWEBデベロッパーのなかむ（@nakanakamu0828）です。

今回は本ブログのNuxt.jsのバージョンを v1.4.0からv2.0.0にアップグレードします。9/21（？）にv2.0.0のリリースがありました。既にQiitaなどにアップグレードの記事が上がっているようですし私のブログも対応していくことにしました。

インストール済みのNuxt.jsを削除

■ npmを利用する場合

$ npm uninstall nuxt (@nuxtjs/axios @nuxtjs/google-analytics @nuxtjs/moment @nuxtjs/pwa） --save

■ yarnを利用する場合

$ yarn remove nuxt (@nuxtjs/axios @nuxtjs/google-analytics @nuxtjs/moment @nuxtjs/pwa）

依存しているパッケージも合わせて削除します。

Nuxt.js v2をインストール

■ npmを利用する場合

$ npm install nuxt@^2.0.0 (@nuxtjs/axios @nuxtjs/google-analytics @nuxtjs/moment @nuxtjs/pwa） --save

■ yarnを利用する場合

$ yarn add nuxt@^2.0.0 (@nuxtjs/axios @nuxtjs/google-analytics @nuxtjs/moment @nuxtjs/pwa）

削除の時と同様で依存しているパッケージもインストール

eslintの設定変更

eslintでエラーが発生するのでnuxt.config.jsを修正します。
isDev, isClientなどの変数がなくなったことが原因で、process.server, process.clientを使うようにしましょう。

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