Nuxt のキャッチアップ

[knokmki612]

#270 で Nuxt 3.0 から 3.8 に上げたが、その間の変更で有用な機能の追加や、重要な変更があるか確認が必要。ひとまずリリースにあわせて書かれた記事を読んでいく必要がある

• https://nuxt.com/blog/v3-3
• https://nuxt.com/blog/introducing-nuxt-devtools
• https://nuxt.com/blog/v3-4
• https://nuxt.com/blog/v3-5
• https://nuxt.com/blog/v3-6
• https://nuxt.com/blog/nuxt-on-the-edge
• https://nuxt.com/blog/v3-7
• https://nuxt.com/blog/v3-8
• https://nuxt.com/blog/nuxt-devtools-v1-0
• https://nuxt.com/blog/v3-13
• https://nuxt.com/blog/v3-14

[knokmki612]

v3.3

ローカルモジュールの更新による開発サーバーの再起動等ができるようになった
https://nuxt.com/blog/v3-3#local-module-development-dx
https://nuxt.com/docs/guide/directory-structure/modules

Nuxt Dev Tools

• ルートの一覧、異同
• 使用しているコンポーネント、モジュール、アセット、Nuxtプラグインの一覧
• Nuxt hook のリスナー一覧、実行回数、所要時間の分析
• App Config の表示
• useState / useAsyncData / useFetch が取得したデータの分析
• など…

https://nuxt.com/blog/introducing-nuxt-devtools

v3.4

~ ~~ @ @@ エイリアスによるモジュールパス解決が Layer を拡張したケースでも有効に
https://nuxt.com/blog/v3-4#layers-improvements

v3.5

useState / useAsyncData で ref / reactive / shallowRef / shallowReact / 正規表現 / Date / Map / Set / BigInt がサポートされるように（従来は単純に JSON シリアライズされる都合でこれらのオブジェクトはサポートされていなかった）
https://nuxt.com/blog/v3-5#rich-json-payloads

unplugin-vue-routerとの統合でルートの型サポートがされるように（実験的機能）
useRouteコンポーザブルでパラメータの型が得られるなど。
https://nuxt.com/blog/v3-5#fully-typed-pages

server ディレクトリの tsconfig がされるように。IDEの型補完が改善される
https://nuxt.com/blog/v3-5#%EF%B8%8F-separate-server-types

v.3.6

SPA で動作するページについて、読み込み中に表示するインジケーターが実装可能に
https://nuxt.com/blog/v3-6#spa-loading-indicator

#import モジュールから取得できるモジュールが正確になり型安全性が高まる
https://nuxt.com/blog/v3-6#increased-type-safety

Nuxt の Edge ランタイムサポート

https://nuxt.com/blog/nuxt-on-the-edge

v3.7

nuxi cli が刷新された。unjs/cittyで再実装された。
nuxi のバージョンが nuxt のバージョンと同期されなくなり、より活発な開発がおこなわれるようになる。
https://nuxt.com/blog/v3-7#a-new-cli

v3.8

Next Dev Tools が Nuxt に同梱されるように
https://nuxt.com/blog/v3-8#built-in-nuxt-devtools

<NuxtImg> <NuxtPicture> 標準コンポーネントの追加（@nuxt/image による画像最適化との併用になる）
https://nuxt.com/blog/v3-8#nuxt-image-auto-install

App Manifest がビルド後のアプリにも含まれるようになり nuxt generate で生成された場合に、生成されたルートからのみペイロードが取得されるように。また、クライアント側でのリダイレクトの設定が可能に
https://nuxt.com/blog/v3-8#app-manifest

<NuxtLink> コンポーネントのカスタマイズが可能に
https://nuxt.com/blog/v3-8#nuxtlink-defaults

useAsyncData/useFetchの改善

• deep オプションを無効にすると深いリアクティビティは無効になる。巨大な配列やオブジェクトでのパフォーマンスに影響あり
• getCachedData プロパティでキャッシングアルゴリズムのカスタマイズが可能に

https://nuxt.com/blog/v3-8#nuxtlink-defaults

型は明示的に型インポートが必要に (TypeScript)
暗黙的なモジュールのインポート import from で型をインポートすると、型エラーになるようになった。
明示的に型インポート import type from する必要がある

https://nuxt.com/blog/v3-8#type-import-changes

v3.9

（実験的機能）インタラクティブなサーバーコンポーネントのサポート。nuxt-client ディレクティブを指定してハイドレーションが可能に
https://nuxt.com/blog/v3-9#%EF%B8%8F-interactive-server-components

v3.10

（実験的機能）デフォルトだと事前レンダリング時に同じデータが重複して取得されるが、自動的に取得済みのデータが共有され重複されない機能の導入
https://nuxt.com/blog/v3-10#experimental-shared-asyncdata-when-prerendering

クライアント側でのNode標準モジュール（のポリフィル）の利用が可能に
https://nuxt.com/blog/v3-10#client-side-nodejs-support

v3.11

サーバー側でのログがクライアント側（ブラウザーコンソール）で表示されるように
https://nuxt.com/blog/v3-11#better-logging

<ClientOnly> コンポーネントによるクライアントでのみ描画する範囲のコントロールが可能に
https://nuxt.com/blog/v3-11#%EF%B8%8F-server-and-client-only-pages

v3.12

<NuxtRouteAnouncer> コンポーネントによりルートに関する情報がアクセシブルに提供されるように
https://nuxt.com/blog/v3-12#built-in-accessibility-improvements
https://nuxt.com/docs/api/components/nuxt-route-announcer

Nuxt 2 が EOL に

https://nuxt.com/blog/nuxt2-eol

[knokmki612]

v3.13

Route Groups (() でディレクトリ名を囲むと URL パスとしては無視される) が追加された
https://nuxt.com/blog/v3-13#%EF%B8%8F-route-groups

v3.14

nuxt 設定ファイル、モジュールの読み込みやビルド時に実行されるコードがjiti v2で動作するようになりました。
https://nuxt.com/blog/v3-14#%EF%B8%8F-faster-starts-powered-by-jiti

クライアント側、サーバー側で自動インポートの対象となるshared ディレクトリが追加されました。
このディレクトリのファイルではVueやNitroのモジュールの自動インポートはされません。
https://nuxt.com/blog/v3-14#shared-folder-for-code-and-types-shared-with-clientserver

rspack によるビルドをサポート
https://nuxt.com/blog/v3-14#rspack-builder

新しいコンポーザブル useResponseHeader useRuntimeHook の追加
https://nuxt.com/blog/v3-14#new-composables

[knokmki612]

キャッチアップはできたものの内容の反映は具体的に思いつかなかった。とりあえずこのまま残して今後もキャッチアップした内容を本issueにためておく