Nuxt.js(2.12系)をアップグレードする方法について。現在の最新版は2.14系なので、そのバージョンにアップグレードする。
アップグレード(2.12.x→2.14.x)
package.jsonのnuxtパッケージのバージョンを上げる
^2.14.0
と記述すると、2.14以上で最新のバージョンがインストールされることになる。
"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+の新機能を有効にするための記述
components: true
これによってcomponents配下のファイルが自動で読み込まれるようになったので、.vue
ファイルへの以下の記述は不要になる。
<script>
import Aaa from '~/components/Aaa'
export default {
components: { Aaa },
}
</script>
publicRuntimeConfig, privateRuntimeConfigの追加
dotenvモジュールがなくても.envファイルがデフォルトで読み込まれるようになったので、状況に合わせて設定を追加する。
publicRuntimeConfig
…公開できる環境関数(サイト名、サイトURLなど)privateRuntimeConfig
…公開できない環境関数(APIキーなど)
BASE_NAME = サイト名
BASE_URL = http://hogehoge.com
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パッケージのバージョンを下げる
"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にコマンドを記述
変更前
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},
変更後
"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で不要になった以下の設定を削除。
// ↓削除
dotenv
require('dotenv').config();
// ↓modeオプション非推奨のため削除
mode: 'universal',
build: {
/*
** You can extend webpack config here
*/
// ↓削除
extend (config, ctx) {
},
},
npm run dev
でサイト起ち上げ。

無事に起動した。「Nuxt.js開発のための匿名データ収集に協力するか?」みたいな質問が出てきて、Yes
でも問題ないと思うがとりあえずNo
にしておいた。