nuxt4が正式リリースされたのでnuxt3からマイグレーションした
ここ数年は React や Next.js を業務で使うことが多かったのですが、個人のポートフォリオは Nuxt.js を使っていました。
今回 Nuxt4 が正式にリリースされたので、Nuxt3 から Nuxt4 にマイグレーションしてみました。
個人的に Nuxt や Vue は大好きです。
Nuxt4へのマイグレーションの流れ
私の場合、ざっくり以下の流れで簡単に完了できました。また、内容は、Nuxt4 のリリースアナウンスや公式ドキュメントのマイグレーションガイドに詳細がまとまっているのでそちらも合わせて確認すると良いと思います。
- Nuxt のアップグレード
公式では、pnpm nuxt upgradeといったコマンドを実行するとありますが、手動で package.json を更新して、pnpm installを実行しても問題ありません。
ちなみに実行すると、以下のような形で選択肢が出てきます。dedupe lockfileとは、lockfile から重複した依存関係を取り除く操作のことで推奨とのこと。
XXXXXXX % pnpm nuxt upgrade
ℹ Package manager: pnpm 10.13.1 nuxi 4:47:07 PM
ℹ Current Nuxt version: 4.0.0 nuxi 4:47:07 PM
❯ Would you like to dedupe your lockfile (recommended) or recreate node_modules and pnpm-lock.yaml? This can fix problems with hoisted dependency versions and ensure you have
the most up-to-date dependencies.
● dedupe lockfile (recommended)
○ recreate node_modules and pnpm-lock.yaml
○ skip
- Nuxt4 の新ディレクトリ構成に合わせる
手動で更新してもいいのですが、公式でマイグレーションレシピが用意されているのでそちらを使うと簡単です。
npx codemod@latest nuxt/4/migration-recipe
実行すると以下のような選択肢が出てくるので、nuxt/4/file-structureを選択します。
Nuxt4 ではディレクトリ構成が app/配下に変更されているので、フレームワーク標準のディレクトリ構成に自動的に変更してくれます。
XXXXXXX % npx codemod@latest nuxt/4/migration-recipe
✔ Successfully fetched "nuxt/4/migration-recipe" from local cache.
? Press Enter to run the selected codemods in order. You can deselect anything you don’t want. (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter>
to proceed)
◉ nuxt/4/absolute-watch-path
◉ nuxt/4/default-data-error-value
◉ nuxt/4/deprecated-dedupe-value
❯◉ nuxt/4/file-structure
◉ nuxt/4/shallow-function-reactivity
◉ nuxt/4/template-compilation-changes
XXXXXXX % npx codemod@latest nuxt/4/migration-recipe
✔ Successfully fetched "nuxt/4/migration-recipe" from local cache.
? Press Enter to run the selected codemods in order. You can deselect anything you don’t want. nuxt/4/absolute-watch-path, nuxt/4/default-data-error-value,
nuxt/4/deprecated-dedupe-value, nuxt/4/file-structure, nuxt/4/shallow-function-reactivity, nuxt/4/template-compilation-changes
✔ Successfully fetched recipe codemods.
? Current git state contains uncommitted changes. Proceed anyway? Yes
╭───────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ │
│ Codemod: nuxt/4/absolute-watch-path@1.0.3 │
│ Target: XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX │
│ │
│ Using paths provided by codemod settings │
〜〜省略〜〜
│ **/.dynamodb/**/*.*, **/.tern-port │
│ │
│ Running in 4 threads │
│ File formatting disabled │
│ │
│ │
╰───────────────────────────────────────────────────────────────────────────────────────────────────────╯
Execution progress | ████████████████████████████████████████ | 100% || 64/64 files || Current:
〜〜省略〜〜
No changes were made during the codemod run.
これだけで基本的なディレクトリ変更は完了します。こういった気配りがあるところに Nuxt.js の良さを感じます。
ただし、Nuxt 標準のディレクトリ以外はそのまま残されているので、そこは必要に応じて移動させる必要がありそうです。
私の場合、assets、components、composables、layouts、middleware、pages、pluginsは先ほどのコマンドで自動移動されました。
ただ、標準のディレクトリ構成にはないmodels、scriptsなどのフォルダはそのままでしたので、個別で移動させました。
最終的には以下のようなディレクトリ構成になると思います。
my-nuxt-app/
├─ app/
│ ├─ assets/
│ ├─ components/
│ ├─ composables/
│ ├─ layouts/
│ ├─ middleware/
│ ├─ pages/
│ ├─ plugins/
│ ├─ utils/
│ ├─ app.vue
│ ├─ app.config.ts
│ └─ error.vue
├─ content/
├─ public/
├─ shared/
├─ server/
└─ nuxt.config.ts
最後に
Nuxt4 へのマイグレーションは個人のポートフォリオサイトなどであれば、簡単にできそうです。
React が主流になって 10 年程度経過したので、次のフロントエンドフレームワークの主流は何になるのか楽しみですね。
補足
Discussion