Zenn
Closed8

Nuxt.jsプロジェクトのバージョンを上げるときのメモ

Node.js
Nuxt
yarn
あーるあーる

はじめに

Nuxt.jsはWebアプリケーションフレームワークの１つ。
ReactがNext.jsなら、 VueでNuxt.jsといった位置づけ。
先日、公式Twitterにて 2.15.0 にバージョンアップしたことが告知された。

https://twitter.com/nuxt_js/status/1361314877038542854?s=20

スクラップ作成時点で現行バージョンは 2.15.1。

もうすぐ 3系 にアップグレードされるのと、 Nuxt.jsを勉強し始めてから初めてバージョンアップを行ったため個人的にメモとして残しておく。

あーるあーる

Package.jsonの書き換え

ルートディレクトリにあるpackage.jsonを書き換える。
dependencies にある nuxt 部分のバージョンを変更するバージョンに書き換える。

修正前

package.json
  "dependencies": {
    "core-js": "^3.8.3",
    "nuxt": "^2.14.12"
  },

修正後

package.json
  "dependencies": {
    "core-js": "^3.8.3",
    "nuxt": "^2.15.0"
  },
あーるあーる

ロックファイルの削除

パッケージマネージャにYarnを利用しているためルートディレクトリに存在するyarn.lockを削除する。

$ rm yarn.lock
あーるあーる

パッケージと依存関係を再インストール

package.jsonで指定したバージョンをインストールするためにyarnコマンドでパッケージ＆依存関係を再度インストールする

パッケージのインストールが始まるので終わるまで待つ。

$ yarn

...
success Saved lockfile.

yarn.lockファイルが生成されたら完了。

今回は使用していないが、他の依存関係のアップデートを行う場合outdatedコマンドが使用可能。

あーるあーる

アップデートできたかバージョンを確認

Nuxt.jsのバージョンを確認するには以下のパッケージを実行する。

$ yarn -s run nuxt -v

@nuxt/cli v2.15.1

バージョンが出力されたらOK。

今回はv2.15.1がインストールされたことがわかる。

あーるあーる

開発サーバーの立ち上げ確認

$ nuxt

   ╭───────────────────────────────────────╮
   │                                       │
   │   Nuxt @ v2.15.1                      │
   │                                       │
   │   ▸ Environment: development          │
   │   ▸ Rendering:   server-side          │
   │   ▸ Target:      server               │
   │                                       │
   │   Listening: http://localhost:3000/   │
   │                                       │
   ╰───────────────────────────────────────╯

開発サーバートップの画像

バージョンが上がり、開発サーバーも問題なく動作している。

このスクラップは2021/02/20にクローズされました