😌

Nuxt3→Nuxt4変更点【移行ガイド】

に公開
Nuxt
Vue.js
移行
Nuxt 3
Nuxt 2
tech

こんにちは、やむぅ。です。
今回のNuxt4正式にリリースに伴い、Nuxt3 から何が変わったのか、 Nuxt4 への移行はどうしたらいいのか、Nuxt4 の新機能、破壊的変更について書いていきます。

https://nuxt.com/blog/v4

Nuxt4の変更点・新機能

Nuxt4 での主な変更・新機能は以下です。

  • Vue3 へ完全移行
  • Composition API の積極採用
  • Nitro エンジンの統合強化
  • 新しいディレクトリ構造
  • データ取得の改善
  • TypeScript型定義の向上

この中で特に移行に影響のある「データ取得の改善」「新しいディレクトリ構造」「TypeScript型定義の向上」について詳しく解説します。

Nuxt4:データ取得の改善

Nuxt4ではuseAsyncDataやuseFetchがより使いやすく、より優れた機能になりました。
例えば、同じキーを使用する場合はそのデータを自動的に共有するようになりました。他にも、コンポーネントのアンマウント時に自動的にクリーンアップされるようになったり、必要に応じてデータを再取得できるようになりました。

特に気をつけるべき変更点は、

  • useAsyncDataとuseFetchのデフォルト値がundefinedになる
  • 同じキーのuseAsyncDataとuseFetchのdata,errorが共有される
  • useAsyncData,useFetchのキーがリアクティブの場合、それが変更されると自動的にデータを再取得する
  • pendingオブジェクトが非推奨になり、statusで判別するようになった
  • useAsyncData,useFetch,useLazyAsyncData,useLazyFetchのdataオブジェクトがrefからshallowRefになった
  • useAsyncDataで取得したデータを使うコンポーネントをアンマウントするとデータを削除する
  • refreshに渡すことができたdedupe: booleanが削除になった
  • defaultが設定されている場合、clearかclearNuxtDataでデフォルト値にリセットされるようになった

Nuxt4:新しいディレクトリ構造

Nuxt4のプロジェクト(ディレクトリ)構造がガラッと変わりました。

これまではプロジェクト直下に配置していたpagesやcomponentsなどといったディレクトリは、app/内で置くようになりました。

・Nuxt3でのディレクトリ構造

プロジェクト
    |- assets/
    |- components/
    |- composables/
    |- layouts/
    |- middleware/
    |- pages/
    |- plugins/
    |- public/
    |- server/
    |- test/
    |- utils/
    |- app.vue
    |- error.vue
    |- nuxt.config.ts

・Nuxt4でのディレクトリ構造

プロジェクト
    |- app/
        |- assets/
        |- components/
        |- composables/
        |- layouts/
        |- middleware/
        |- pages/
        |- plugins/
        |- utils/
        |- app.vue
        |- error.vue
    |- public/
    |- server/
    |- test/
    |- nuxt.config.ts

こうなったことでクライアント側かサーバー側、どちらに関係するコードなのかがはっきりしました。
僕的には、 Next.js のディレクトリ構造に近づいた感じがしてすごく良きです。

Nuxt4:TypeScript型定義の向上

Nuxt4からshared/フォルダが使えるようになりました。これを使うことでクライアントとサーバー間で機能を共有することができます。
※正確にはNuxtv3.14以降から使えるようになった機能です

https://nuxt.com/docs/4.x/guide/directory-structure/shared

今までは、UI側で作ったutils,typesはサーバー側では使えませんでした。そのため以下のように同じものをそれぞれに作る必要がありました。

プロジェクト
    ~~~~
    |- server/
        |- utils/ - サーバー側でのみ使える
        |- types/ - サーバー側でのみ使える
    |- utils/ - クライアント側でのみ使える
    |- types/ - クライアント側でのみ使える

ですがshared/を使うことで、UI側とサーバー側で同じutil関数や型を使うことができます。

プロジェクト
    ~~~
    |- shared/
        |- utils/
            |- formatters.ts - クライアント、サーバー両方で使える
        |- types/
            |- user.d.ts - クライアント、サーバー両方で使える

その他変更点

  • ルートメタデータの重複排除
  • 正規化されたコンポーネント名
  • タグ生成用UnHeadがバージョン2に更新
  • indexファイルスキャン
  • 実験的機能の削除・廃止

詳細は公式ガイドをご覧ください

https://nuxt.com/docs/4.x/getting-started/upgrade

また、QiitaでNuxt3からNuxt4への移行ガイドをつくってみたのでよければそちらもご覧ください！

https://qiita.com/yamu_studio/items/8d0c6973123489d9fe10

今回の著者

現役でエンジニアやってるやむぅ。です！
フリーランスエンジニアとして働きながら、 「個人サービス運営」「エンジニアサポート」「YouTube発信」この三つを主軸に活動しています。直近では、「YouTubeをNuxt x FastAPI x MySQLで作ってみた」や「WebニュースのAI分析サービスのリリース」「Twitchクリップの検索・シェアサービスのリリース」をしました。

YouTubeをNuxt x FastAPI x MySQLで作ってみた

https://newscope.raimuproject.com/

https://comvi.raimuproject.com/

僕がエンジニアとして、失敗したことや上手くいったこと、実際にやってみたことをもとに書いてるので、ぜひ参考にしてください！

【最後に告知！】定期『ワークショップ』のご案内🔥

「プログラミングを始めたいけど、何から手をつけていいか分からない…」
「本や動画を試したけれど、途中で挫折してしまった…」
「HTML、CSS、JavaScriptの役割がごちゃごちゃになって、全体像が掴めない…」

そんなプログラミング未経験・初心者向けに「プログラミングのイメージを掴む」ことができるワークショップを開催します！

  • HTML、CSS の基礎が学べる 「最初の一歩」
  • Java/Go/Python の基礎が学べる 「システムエンジニアへの道」
  • 流行りのフレームワークReactやVueの実践開発体験
  • 人気バックエンドスキルの実践開発体験

…etc とさまざまなワークショップを定期的に開催します。
独学で詰まってる方や、エンジニアのリアルを知りたい・体験したいプログラミング未経験・初心者の方はぜひご参加ください！

お申し込みはこちらから
👉 開催予定のワークショップを確認する(Googleフォームに移動します)

【もひとつ告知！】僕が1 on 1でプログラミング教えます!

AI時代に求められる実務スキル & エンジニアのリアルを網羅したカリキュラムを実際の開発案件をもとに作り上げました！もちろん高校生や大学生も大歓迎で、今、プログラミングスクールを検討している方で、

  • Web開発系エンジニアを目指している
  • システムエンジニアを目指している
  • AI時代でも生きていける技術力を身につけたい

そんな方々を対象とした、エンジニアという仕事に興味を持ち、頑張ってみようと思ったあなたを現役エンジニアが応援・サポートする完全1 on 1スクールですので、こちらぜひご検討ください！

※副業、Web制作を目指している方はお力になれません…ご了承ください。

https://programing-factory.raimuproject.com/?siteType=note

Discussion