Nuxt4への移行はそんなに大変じゃなさそう！ (Opting in to Nuxt 4)

こんにちは、keigoです。
先日リリースされたNuxt3.12では、Nuxt4 Opt-inの機能が提供されています。

https://nuxt.com/blog/v3-12

今回は、Nuxt4 Opt-inに移行する際の手順や概要をご説明するとともに、Nuxt4 Migrationにかかるコスト感を掴んでいただければと思います。

Nuxt4変更点について

Nuxt4の重大な変更として、デフォルトのディレクトリ構造変更があります。(後方互換性あり)

これまでアプリケーションルートに存在していた components/, pages/, assets/, ...などといったディレクトリが、app/配下にまとめられるようになりました。

Nuxt3のディレクトリ構造

.output/
.nuxt/
assets/
components/
composables/
layouts/
middleware/
pages/
plugins/
utils/
app.vue
router.options.ts
modules/
node_modules/
public/
server/
  api/
  middleware/
  plugins/
  routes/
  utils/
nuxt.config.ts

Nuxt4のディレクトリ構造

.output/
.nuxt/
app/
+   assets/
+   components/
+   composables/
+   layouts/
+   middleware/
+   pages/
+   plugins/
+   utils/
+   app.vue
+   router.options.ts
modules/
node_modules/
public/
server/
  api/
  middleware/
  plugins/
  routes/
  utils/
nuxt.config.ts

ディレクトリ構造の改善についての全文は、以下のissueをご覧ください。
https://github.com/nuxt/nuxt/issues/26444

ディレクトリ構造の改善以外にも、これまで実験的機能として提供していた機能の正式提供や、useAsyncDataなどのfetch系関数に対する多少の変更など、いくつかのアップデートが加わっています。
詳細は、Nuxt公式の「Testing Nuxt 4」の項をご覧ください。
https://nuxt.com/docs/getting-started/upgrade#testing-nuxt-4

🔔 互換性について

基本的には、Nuxt4はNuxt3との互換性を持っています。
ディレクトリ構造に関しても、対応は必須ではありません。
それ以外の変更も、互換を保つためのoptionが用意されています。

Nuxt3プロジェクトでNuxt4を動作させる

nuxtのバージョンを3.12にした後、nuxt.config.tsにて、以下のコードを記述します。

export default defineNuxtConfig({
  future: {
    compatibilityVersion: 4,
  },
})

Running with compatibility version 4と表示されればOKです！

> dev
> nuxt dev

Nuxt 3.12.2 with Nitro 2.9.6                                                 
                                                                                                                                                          
  ➜ Local:    http://localhost:3000/
  ➜ Network:  use --host to expose

ℹ Running with compatibility version 4

おわりに

Nuxt2からNuxt3へのMigrationで大変な思いをした方もいらっしゃるかと思います。
Vueエコシステムは、v2からv3への破壊的変更の反省点を活かし、後方互換性をかなり意識していると聞いています。( ecosystem-ci もその取り組みのうちの一つ)
今回のv4への移行は、その教訓がかなり活かされているなと感じました！メジャーバージョンの変更でここまで対応必須な箇所が少ない (場合によっては無い) のは驚きました。

Nuxt3.12でNuxt4 Opt-inを試すことが可能ですので、Nuxt4 Migrationに関して不安を抱えていたり、事前に試してみたい場合は、ぜひこちらの機能を使って試してみてください！