はじめに
個人ブログのフロントを Nuxt 3 から Nuxt 4 に移行してみました。互換レイヤーが用意されているとはいえ、いくつか手を入れる箇所があったので、気づきを残しておきます。
主な変更点
ディレクトリ構成
app/ ディレクトリが標準になり、pages/・components/・composables/ などはこの配下に置く構成が推奨になりました。既存プロジェクトは compatibilityVersion を切り替えるだけでも動きますが、新規ならフラットに app/ 配下にまとめておくのが見通しがよさそうです。
データ取得
useAsyncData や useFetch の挙動と型は基本的に同じですが、一部のオプションで挙動が整理されています。レンダー前に必要なデータは、引き続き await 付きで取りに行く形が安全です。
詰まったところ
Nuxt Content の差分
Content v3 では Collection API が追加され、queryCollection('blog') のように扱う形に変わっていました。queryContent 系のクエリは自前のラッパーを書いていた箇所と整合が取れず、書き直しが必要でした。
型推論
schema で frontmatter を定義していると、コレクションから取り出した値がきちんと型付けされて気持ちよく書けます。最初に schema をしっかり書いておくと、あとで楽でした。
やってみた感想
「動かなくなる」というよりは「整理されて素直になった」という印象の移行でした。必要な範囲だけ手を入れて、徐々にディレクトリ構成も新しい形に寄せていく予定です。