Nuxt.jsのバージョンをアップグレード／ダウングレードする

2020年11月15日
2021年01月19日

Ad Area

Nuxt.js（2.12系）をアップグレードする方法について。現在の最新版は2.14系なので、そのバージョンにアップグレードする。

アップグレード（2.12.x→2.14.x）

package.jsonのnuxtパッケージのバージョンを上げる

^2.14.0と記述すると、2.14以上で最新のバージョンがインストールされることになる。

package.json

"dependencies": {
    "nuxt": "^2.14.0",
    …（略）
  },

ファイルおよびディレクトリの削除

npmはpackage-lock.json、yarnはyarn.lockファイルを削除する。

さらに、node_modulesディレクトリを削除する。

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

rootディレクトリでコマンドを実行する。

npm install
// or
yarn install

各パッケージのアップグレード

npm outdated
// or
yarn outdated

で最新のバージョンが確認できるので、それそれアップグレードする。

nuxt.config.jsの編集

v2.13+の新機能を有効にするための記述

nuxt.config.js

components: true

これによってcomponents配下のファイルが自動で読み込まれるようになったので、.vueファイルへの以下の記述は不要になる。

.vue

<script>
import Aaa from '~/components/Aaa'

export default {
  components: { Aaa },
}
</script>

publicRuntimeConfig, privateRuntimeConfigの追加

dotenvモジュールがなくても.envファイルがデフォルトで読み込まれるようになったので、状況に合わせて設定を追加する。

publicRuntimeConfig…公開できる環境関数（サイト名、サイトURLなど）
privateRuntimeConfig…公開できない環境関数（APIキーなど）

.env

BASE_NAME = サイト名
BASE_URL = http://hogehoge.com

nuxt.config.js

export default {
    publicRuntimeConfig: {
        baseName: process.env.BASE_NAME,
        baseUrl: process.env.BASE_URL
    }
    privateRuntimeConfig:{
      api: process.env.API_KEY
    }
}

ダウングレード（2.14.x→2.13.x）

アップグレード後にトラブルが起きた時のためにダウングレードも考えておきたい。おおむねアップグレードの時の逆作業を行うことになる。

nuxtパッケージのバージョンを下げる

package.json

"dependencies": {
    "nuxt": "<2.14.0",
    …（略）
  },

<2.14.0で2.13.xの最新バージョンがインストールされる。

ファイルおよびディレクトリの削除

package-lock.json（npm）、yarn.lock（yarn）ファイルの削除とnode_modulesディレクトリの削除を行う。

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

rootディレクトリでコマンドを実行する。

npm install
// or
yarn install

package.jsonにコマンドを記述

変更前

package.json

"scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },

変更後

package.json

"scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "export": "nuxt export",
    "serve": "nuxt serve"
  },

2.13.xで非推奨のgenerateコマンドを削除し、必要なexportとserveコマンドを追加する。

実際に2.12.2→2.14.12にアップグレードしてみた

手順通りにインストールを行う。

アップグレード完了の証が表示された。ロゴのアスキーアート（？）がおにぎりみたいでかわいい。

オープンソースプロジェクトのNuxt.js開発維持のための寄付
Nuxt.js に貢献する - Open Collective

2.14.xで不要になった以下の設定を削除。

nuxt.config.js

// ↓削除
  dotenv
  require('dotenv').config();

// ↓modeオプション非推奨のため削除
  mode: 'universal',

build: {
    /*
    ** You can extend webpack config here
    */
    // ↓削除
    extend (config, ctx) {
    },
  },