Nuxt / UnJS Advent Calendar 2024の9日目の記事です。
この記事では2024年のNuxtとUnJS、そしてそれらにまつわる周辺エコシステムについてを振り返っていきます。関連する大きな出来事や変更があったものについてを中心にまとめています（この内容も取り上げてほしい！というものがあった際は、GitHubから編集提案をください）。
Nuxt
Nuxtは今年でリリースされてから8年が経ちました。
Nuxt2 EoL
Nuxtのダウンロード数はNuxt 3が約75%を占めており、多くの開発者がNuxt 3への移行を進めています。
一方で前バージョンのNuxt 2は今年の6月30日にEOLを迎えました。引き続き使う場合はHeroDevsでの有償サポートを受けることができます。
Nuxt 3.10
- 共有されたasyncDataのprerendering：prerendering時にデータの再取得を防ぐ機能が追加されました
-
SSRセーフなユニークIDの生成：SSRセーフなユニークIDを生成するための
useIdコンポーザブルが追加されました - app/router.optionsの拡張：モジュール作成者が独自のrouter.optionsファイルを注入できるようになりました
- クライアントサイドのNode.jsサポート：クライアントサイドでNode.jsのビルトインモジュールをポリフィルする実験的サポートが追加されました
-
useCookieのリアクティビティ向上：CookieStoreを使用してクッキーの値をリアクティブに更新するオプションが追加されました - 潜在的なバグやパフォーマンス問題の検出機能の追加
- ページごとにView Transitionsのサポートが可能
- ビルド時にルートメタデータへのアクセスが可能
- TypeScriptのバンドラー解決によるバンドラーモジュール解決
Nuxt 3.11
- ログ機能の改善: サーバーサイドレンダリング中にブラウザコンソールへログが表示されるようになりました
-
プレビューモード:
usePreviewModeを使用して、プレビューモードが利用できるようになりました - Cache-busting payloads: デプロイ後に古いデータが残らないように自動的なキャッシュバスティングが行われるようになりました
-
Middleware
routeRules: Nuxtアプリケーション内のページパスに対してミドルウェアが定義できるようになりました -
新しいデータフェッチユーティリティ
clear:useAsyncDataとuseFetchがclearユーティリティを公開しました -
新しい
#teleportsターゲット: サーバーサイドテレポートをサポートする新しい<div id="teleports"></div>要素が追加されました -
ローディングインジケーターとトランジションコントロール: ローディングインジケータを非表示にし、必要に応じて
finish()メソッドを強制的に実行するためのカスタムタイミングを設定できるようになり、View Transitions APIにフックするpage:view-transition:startフックが登場しました -
サーバーおよびクライアント専用ページ:
.server.vueまたは.client.vueサフィックスを使用して、サーバーまたはクライアント専用ページを作成できます - サーバーコンポーネントの改善
- パフォーマンスの向上
- パブリックアセットの取り扱いの変更
- JSチャンクのデフォルト命名パターンの変更
- 型の修正
Nuxt 3.12
-
Nuxt 4の変更テスト: Nuxt 4の変更箇所をテストするために設定にて
compatibilityVersionオプションが追加されました。 - Nuxt Scriptsの自動インストール
-
レイヤーの自動登録とバグ修正: プロジェクト内の
~/layersが自動的に登録されるようになり、依存関係の読み込みが改善されました -
アクセシビリティの向上:
<NuxtRouteAnnouncer>とuseRouteAnnouncerが追加され、SPAでのルート遷移時の状態をスクリーンリーダーへ通知できるようになりました - マルチアプリサポート: 複数のNuxtアプリを並行して実行できるようになるための変更が行われました
- 機能の安定化: いくつかの実験的オプションが安定化に伴い、experimentalから削除されました
- モジュール作者向けの改善: モジュールオプションの型サポートや、ランタイム設定のアクセスと更新が可能になりました
- パフォーマンスの改善
- 開発者体験の向上
- 型の改善
Nuxt 3.13
- Route Groups: ディレクトリ名に括弧や角括弧を使用してルートを整理できるようになりました。これにより、URL構造に影響を与えずにルートをグループ化できます
-
IslandとHeadメタデータ: サーバーコンポーネントから
headを操作し、SEOメタデータを追加できるようになりました -
カスタムプリフェッチトリガー: NuxtLinkで
prefetch-onトリガーをサポート。ホバーやフォーカス時、または可視化されたときにプリフェッチを実行できます - サーバーソースマップの改善: サーバービルドのソースマップが元のソースファイルを参照するようになりました
- モジュール作者向けの新機能: モジュール作者向けに新しいユーティリティや型推論の改善が追加されました
- 開発時の警告の改善: ミドルウェアでのデータフェッチングコンポーザブルの使用に関する警告が削除され、ユーザーコンポーネント名が「Lazy」で始まる場合に警告が表示されるようになりました
- Vue TypeScriptの変更: Vueの型拡張に関する変更があり、ライブラリのコード更新が必要になりました
Nuxt 3.14
- Jitiによる高速起動: Nuxtの設定ファイルやモジュールの読み込みがjiti v2によって高速化されました
-
shared/フォルダ: クライアントとサーバーで共有するコードや型のための新しいshared/フォルダが追加されました - Rspackビルダー: 新しいNuxtのバンドラーとしてrspackが実験的に導入されました
-
新しいコンポーザブル:
useResponseHeaderとuseRuntimeHookという新しいコンポーザブル関数が追加されました -
新しいモジュールユーティリティ: Nitroランタイムルート内でアクセス可能な仮想ファイルを追加するための
addServerTemplateユーティリティが追加されました -
v4への変更:
compatibilityVersion: 4を設定することで、いくつかの変更を早期適用できるようになります
Codemod for Nuxt 4 migration
CodemodではNuxtチームと連携し、Nuxt 3から4への移行用のオープンソースのツールを公開しました。
Nuxt Certification
Nuxtの公式認定試験である「Nuxt Certification」が今年から開始されました。コーディング課題に取り組み、Nuxt開発者としてのスキルをテストできます。
NuxtHub
今年発表されたNuxtHubは、Nuxtフレームワークの拡張機能でCloudflareにてフルスタックアプリケーションをZero config構築ができるようになるものです。Nuxt modulesとしての @nuxthub/core と管理画面としてのNuxtHub Adminが公開されています。
実際に活用している事例としては以下記事をご参照ください。
Nuxt Studio
Nuxt StudioはNuxt Contentを活用したウェブサイト用のGitベースのCMSです。
今年はv2がリリースされ、以下の変更が行われました。
- インターフェースの再設計・刷新
- Google認証の追加
- ライブプレビュー設定の簡素化
Nuxt UI
NuxtアプリケーションのためのUIライブラリであるNuxt UIは今年より次期バージョンであるv3に向けてアルファ、ベータ版の開発が進められています。
主にReka UI（Radix Vueの後継UIライブラリ）、Tailwind CSS v4、Tailwind Variantsを活用したもので構築されています。
nuxt-bridge
Nuxt2からNuxt3へのマイグレーションを支援するツールであるNuxt Bridgeの安定版がリリースされました。
Nuxt Modules
Nuxtアプリケーションで利用できるモジュール群のNuxt Modulesから、大きな変更があったものについてを取り上げます。
Nuxt Content
Nuxtディレクトリの content/ 配下のファイルを活用したブログ・ドキュメントなどのコンテンツ管理ができるNuxt Contentは現在v3の開発が進められています。
前述したNuxt Studioとのサイトドメインの共通化、Nuxt Contentの内容をNuxt Studioにて直接編集が可能になるなど、連携が進められています。
Nuxt Fonts
Nuxt FontsはNuxtアプリでお気に入りのフォントソースを使用した際に最適化できるモジュールです。
デモにもあるように font-family の宣言をするだけでカスタムフォントの追加と最適化を実施してくれます。
Nuxt Icon
Nuxt IconはIconifyをベースにしたNuxtアプリケーション用のアイコンライブラリです。今年v1.0がリリースされました。
Nuxt Leaflet
Nuxt LeafletはLeafletをラップしたリアクティブな地図を作成できるモジュールです。今年より公式のNuxt Modulesのリポジトリに追加されました。
Nuxt Scripts
Nuxt Scriptsはサードパーティ製スクリプトをNuxtアプリケーションで組み込む際にプライバシー・セキュリティを配慮して最適化するモジュールです。Daniel Roe氏によるRFCを経て今年の5月でパブリックプレビューとなりました。
具体的な内容・使い方については以下記事をご参照ください。
Nuxt SEO
Nuxt SEOはNuxtアプリケーションやサイトのオーガニックトラフィックを増やすための技術的な側面を処理してくれるモジュールです。v2が11月25日にリリースされました。これまで個別でインストール必要だったモジュールが @nuxtjs/seo に統一されています。今後はNuxt SEO Proの有料版も公開される予定です。
Nuxt Tutorial
Nuxt TutorialはNuxt公式で提供されているチュートリアルサイトです。すべてWeb上で完結できるチュートリアルです。
今年のVue Fes Japan 2024ではハンズオン教材として日本語版サイトとリソースが公開されました。ハンズオン担当者による振り返り記事も公開されているので併せてご覧ください。
Nx Plugin
Introducing @nx/nuxt: Enhanced Nuxt.js Support in Nx | by Katerina Skroumpelou | Nx Devtools
モノレポ管理ツールであるNxに、Nuxtプロジェクトをサポートするためのプラグイン @nx/nuxt が公開されました。
UnJS
UnJSはあらゆるJavaScriptフレームワーク上で統一的に動作するユーティリティーツール・ライブラリです。今年の1月には公式サイトがリニューアルされました。
UnJSパッケージやnpmパッケージの関係をリアルタイムで視覚化できるUnJS Relationsが公開されました。
Nitro
NitroはNuxtで採用されているUnJSパッケージを活用したサーバーエンジンです。
今年のVue.js Amsterdamにてv2.9.0がライブリリースされました。
- ドキュメントの刷新
- WebSockets API
- SQL database layer
- Nitro Tasks
- unwasmの採用
v2.10.0ではNitro v3に向けての内部リファクタリングを行い、以下変更が含まれております。
- Compatibility date
- Environment-specific handlers
- Route groups
- OpenAPIのプロダクションサポート
- Cloudflare, Netlify, VercelらのPresetの更新
2024年リリースされたUnJS公式パッケージ、UnJSプラグイン
今年リリースされたパッケージやプラグインについてをアルファベット順で列挙しています。
同日のVue Advent Calendar 2024ではVue.jsと周辺のエコシステムについての2024年を振り返っています。こちらも併せてご覧になってみてください。
Discussion