📅

Vue.js と Nuxt の 2023年まとめ

2024/01/03に公開

2023年は Vue.js および Nuxt のアップデートがとっても活発な一年でした。
これだけ多くの、そして多様な進展があると、1年を振り返っておかないと何があったか忘れてしまいそうです。
というわけで Nuxt, Vue.js, Vite 関連の情報をピックアップして🏃‍♂駆け足で振り返ってみます。

(数が多かったので、おもに公式周辺のアカウントから告知されたものが中心です。漏れがあったらすみません。教えていただければ追加します)

🗓2023年1月

2022年の春先に正式に Vue.js 3 がデフォルトのバージョンとなり、2022年11月に Nuxt 3.0 がリリースされました。

年が明けて2023年1月の主だった情報です。

🔼Nuxt 関連

2023年1月17日に公開された Daniel Roe @danielcroe氏による公式ブログ記事 Nuxt: A vision for 2023 で、いくつかの発表がありました。

ひとつが、それまで長年 Nuxt チームを牽引してきた Pooya Parsa氏から Nuxt のリードを(Daniel が)引き継ぐことになったことです。
ほかにも GitHub リポジトリを nuxt/framework から nuxt/nuxt に移行することや、Nuxt による DX およびパフォーマンスの向上を目指すこと、新しいリリースサイクルを導入し月単位のマイナーリリースをしていくことなどを発表しています。

https://github.com/nuxt/nuxt/releases/v3.1.0

  • 2023-01-23 リポジトリを nuxt/nuxt に移行
    • Nuxt 2 も統合されています
  • 2023-01-25 Nuxt 3.1 リリース
    • 多くの機能改善や公式ドキュメントの改善
    • (Experimental) Component Islands(NuxtIsland
      • クライアント側では JavaScript をバンドルしない、非インタラクティブなコンポーネントをレンダリングする機能
    • (Experimental) Server components
      • サーバー側でのみレンダリングされるコンポーネント
      • props の更新によりサーバー側に再度取得しにいく(ほかのリアクティブな値等を利用することはできず、いわばアプリケーション内で分離されている)
      • Foo.server.vue のようなファイル名で作成可能
      • 内部的には <NuxtIsland> が使用される
    • 新しい組み込みコンポーザブル (onNuxtReady, useNuxtData, and useSeoMeta)
    • ほか unjs/nitro v2Vite 4Rollup 3 対応など
  • 2023-01-25 unjs/nitro v2.0 リリース
  • 2023-01-25 Nuxt SEO Kit v1.0 リリース
    • Nuxt 3 用の総合的な SEO プラグイン

🔽Vue.js 関連

元日に公開された Evan You氏によるブログ記事 2022 Year In Review で、リリースの方針を変更すると発表しています。
開発を続ける Vapor Mode のような大きなリリースに先立ち、マイナーリリースにより(互換性を維持しつつ)比較的小規模な機能を頻繁にリリースしていくという方針です。

宣言通り、2023年中には Vue 3.3 と 3.4 のふたつのマイナーリリースがありました。
特徴的なこととして、このふたつのリリースとも Vue Macros 開発者の Kevin Deng氏や Volar 開発者のJohnson Chu氏など、Evan 以外の開発者が主体となった機能開発・改善が多く含まれているということです。

⚡️Vite 関連

🗓2023年2月

🔼Nuxt 関連

https://github.com/nuxt/nuxt/releases/tag/v3.2.0

  • 2023-02-09 Nuxt 3.2 リリース
    • Nuxt DevTools の先行リリース
    • runtimeConfig の型の改善(上書きサポート)
    • useFetch の型を method 別に推測可能に(/server/api/test.get.ts/server/api/test.post.ts など)
    • useFetch 使用時にCookieとContextを内部リクエスト内で自動的にAPIリクエストに渡されるように改善
    • (experimental) サーバー側のビルドでは <ClientOnly> コンポーネントが Tree Shaking されるように改善
    • Nuxt Modules 用に addRouteMiddleware を提供
    • unjs/nitro v2.2 対応
  • 2023-02-26 nuxt-vuefire@0.1.6 vuefire@3.1.0 リリース
    • Firebase SDK v9 に対応し Composition API で扱えるようなった VueFire v3 の Nuxt モジュール対応

🔽Vue.js 関連

2023年2月8日、Vue 3 から公式の VS Code 拡張機能として提供されている Volar の将来的な方向性を示す記事が、開発者の Johnson Chu氏により発表されました(Volar: a New Beginning

そのなかで Volar は Vue.js に限らず同様にテンプレートに埋め込む形式のメタフレームワーク (Processing of embedded programming languages) 等で利用可能にすることを目指すと述べ、実際にフレームワークに依存しないツールとなりました。

🗓2023年3月

🔼Nuxt 関連

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

  • 2023-03-14 Nuxt 3.3 リリース
    • 自動的な ~/modules フォルダ内のモジュールの読み込み
    • nuxt/kit を公開
      • @nuxt/kit をインストールすることなく、プロジェクト内のモジュール等で利用できるように
    • 開発サーバーの改善により Nuxt を自動的に再起動するように
    • パフォーマンス改善(lighthouse のスコア改善)
      • 静的アセットファイルのキャッシュ(maxAge を1年に)
      • ビルド時の Tree Shaking 向上
    • サイトが再デプロイで更新された場合、ナビゲーションの再読み込みを自動的に処理する対応
    • unjs/unhead 使用による <head> 要素の改善
    • Chrome の DevTools チームの協力のもと、コンソール関連の機能を追加・改善
    • APIルート使用時の型の取り扱いの改善
    • unjs/nitro v2.3 対応(useAppConfig の対応など)
  • 2023-03-27 Nuxt DevTools 0.3 リリース
    • Nuxt によるアプリケーション開発をサポートし開発体験が大幅に向上するツール
      • 自動インポートやさまざまな機能により記述するコード量の大幅な削減をもたらす一方で、コードがどのように内部的に変換されているかを把握しづらくなってきていたため、Nuxt DevTools はそれらを明らかにしたりするなどデバッグ等を容易にするため開発されました
    • 初期公開時にすでにページや他のコンポーネントについての情報やモジュール・プラグイン・静的アセットファイル等の情報、state等を確認するなどできるようになっている
    • モジュール開発者は DevTools を拡張することが可能

🗓2023年4月

🔼Nuxt 関連

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

  • 2023-04-11 Nuxt 3.4 リリース
    • (experimental) View Transitions API のサポート
    • (experimental) SSR時に useState 等によりサーバー側からクライアント側に送られるJSONで取り扱えるデータの種類を拡張(devalue v4を使用)
      • 正規表現、日付、Map/Set、BigInt、その他 NuxtError などに対応
    • Nuxt Plugin の記述方法として新たにオブジェクト形式の記法を追加
    • nuxt.config.tsdevtools: true で Nuxt DevTools を有効化できるように
    • (experimental)Nuxt Layers の改善(layers内の @~ 等のエイリアスが自動解決される)
    • unjs/consola v3 および unjs/nitro v2.3.3 などにアップデート

🔽Vue.js 関連

🗓2023年5月

🔼Nuxt 関連

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

  • 2023-05-06 Chrome の Aurora チームと協力し Core Vitals を向上させる取り組みを発表
  • 2023-05-06 unjs/nitro v2.4 リリース
    • app config, runtime config のサポート
      • useAppConfig() and useRuntimeConfig()
    • Incremental Static Regeneration (ISR) をサポート (Vercel, Netlify)
      • routeRules: { '/blog/**': { isr: 3000 } },
    • Vercel KV サポート
    • Cloudflare Module Workers プリセット
    • プリレンダリングをサポート
    • (experimental) Swagger UI サポート
      • /_nitro/swagger で UI を表示
    • 公式ドキュメント
  • 2023-05-06 Vercel での Nuxt のサポートの改善を発表 (Improved support for Nuxt on Vercel)
  • 2023-05-11 Nuxtr リリース
    • Nuxt 開発をサポートする VS Code 拡張機能
  • 2023-05-16 Nuxt 3.5 リリース
    • Vue 3.3 対応
    • unjs/nitro v2.4 対応 (ISRをサポート)
    • Rich JSON ペイロードの改善
      • ref, reactive 等を使用したリアクティブな値をサポート
      • プラグインで独自のシリアライズを定義し使用可能に
      • しばらくフォークを利用していたがオリジナル (Rich-Harris/devalue) の利用に戻した
    • (experimental) Interactive Server Components のサポート
      • slot を利用可能に
    • 環境別configのサポート
      • nuxt.config.ts$production: { ... } などで環境別の設定が可能に
    • (experimental) ルーティングのパスのTypeサポート (navigateTo, <NuxtLink>, and router.push())
    • TypeScript の module resolution bundler のサポート
    • /server ディレクトリ用の .nuxt/tsconfig.server.json のサポート

🔽Vue.js 関連

https://blog.vuejs.org/posts/vue-3-3

SFC (Single File Component) における <script setup> による TypeScript 使用時のDX改善
Vue Language Tools とともにこれまで長きに渡って対応できていなかったものにも対応した

  • 2023-05-11 Vue 3.3 リリース
    • <script setup> 内で defineProps 等でこれまで使用できなかった import した複雑な型の使用をサポート
    • generic な props の型を <script setup lang="ts" generic="T"> サポート
    • defineEmits の型の記述をより親しみやすい形式で記述可能に
    • 新しい defineSlots で型の記述が可能に
    • (experimental) props の分割代入時にリアクティビティを維持するように
    • (experimental) defineModelv-model の定義が可能に(注: Vue 3.4 で正式対応)
    • defineOptions で(<script setup> で対応していない)Options API のみ使用可能だったオプションが使用可能に
      • これに伴い通常の <script> ブロックの併用が不要になりました
    • toReftoValue の2つのリアクティビティ関数が追加
      • toRef は関数を引数にでき const foo = toRef(() => props.foo) のような記述が可能(foo は読み取り専用のリアクティブな値として <script setup> 内で使用可能)
  • 2023-05-11 Vue Router 4.2 リリース
    • グローバルなナビゲーションガードのサポート
  • 2023-05-16 eslint-plugin-vue v9.13.0 リリース(Vue 3.3 対応)
  • 2023-05-19 WebStorm の EAP で Volar をサポート
  • 2023-05-19 Vuetify 3.3 (Icarus) リリース
  • 2023-05-25 @chakra-ui/theme-vue@0.6.1 リリース

⚡️Vite 関連

🗓2023年6月

🔼Nuxt 関連

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

  • 2023-06-22 @tresjs/nuxt 1.0 リリース
    • TresJSThree.js を使用した3次元コンピュータグラフィックスを扱う Vue プラグイン
  • 2023-06-23 Nuxt 3.6 リリース
    • 組み込み SPA ローディング
      • ssr: false のときなど、ハイドレーションが終わるまで ~/app/spa-loading-template.html を表示できるように
    • パフォーマンス改善
      • ビルド時のプラグイン最適化によりハイドレーション時にプラグインを実行できるように
      • ~/error.vue によるエラーページのコンポーネントのJSをメインエントリポイントに含めるように
    • 完全に静的な Server Components のサポート
      • コンポーネントは完全に分離されクライアント側のナビゲーション前にプリロード可能に
    • CSS の重複回避の改善
    • Animation Controls
      • ページ/レイアウト コンポーネントをより細かく制御できるようになり、カスタムトランジションを作成するために、<NuxtPage>pageRef を、<NuxtLayout>layoutRef を設定できるように
    • プリレンダリング時のビルドをデプロイ先に最適化
    • サーバー側の型の改善
      • ~/server/tsconfig.json を使用している場合、サーバー固有の #import と拡張をサポート
    • unjs/nitro v2.5 に対応
    • モジュール開発向け機能の向上(機能追加)

🔽Vue.js 関連

  • 2023-06-17 Vue Language Tools v1.8 リリース
  • 2023-06-22 @vue/repl v2.0 リリース(Monaco Editor + Volar をサポート)
    • Vue SFC REPL は Vue.js コンポーネントのコードをブラウザ上で実行できるツール
  • 2023-06-23 Vue SFC Playground アップデート(Monaco Editor + Volar をサポート)
    • Vue SFC REPL を使用したプレイグラウンド

🗓2023年7月

🔼Nuxt 関連

  • 2023-07-04 Nuxt OG Image v2 リリース
    • SSRにおける画像生成に対応
    • Satori Vue SFC で <style> をサポート
    • 任意のフォントのサポート
    • Nuxt Icon をサポート
    • サーバー側で生成された画像のキャッシュ
  • 2023-07-07 nuxt-simple-sitemap v3.0 リリース
    • i18n 対応
    • デフォルトのキャッシュ
    • XML Stylesheet の改善
    • Debug モード
  • 2023-07-12 Are you a Nuxter? 公開
    • Nuxt のコントリビューターのコミュニティ

🗓2023年8月

🔼Nuxt 関連

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

  • 2023-08-03 Nuxt Supabase モジュール v1.0 リリース
  • 2023-08-25 unjs/nitro v2.6 リリース
    • unjs/h3 v1.8 により Native Web Streams と Response オブジェクトによるレスポンスをサポート
    • Runtime Keys Proposal に対応し、デプロイ先の内容に従って適切なビルドを使用できるように
    • Async Context で利用可能な Composition API
      • すべての Async Context で Request の event にアクセス可能な useEvent ユーテリティを追加
      • Vue Composition API と同様の機能を unjs/unctx によりサポート
    • Error キャプチャとライフサイクルフック
      • useNitroApp().captureError()event.captureError() により unjs/nitro のライフサイクルで発生したエラーをキャプチャできるように
      • Nitro Plugin 内で 'error' をフックした処理を記述可能に(任意のロギング処理の記述等に利用可能)
      • ほかにも request, beforeResponse, and afterResponse のフックが追加
    • 永続的なデータストレージ
      • unjs/nitro には Key - Value のストレージレイヤーがあり、従来キャシュ (cache:) として .nuxt/cache を開発用に使用したが、v2.6 より開発環境・本番環境とも利用可能な永続的なストレージ (data:) をサポート
    • Source Maps の軽量化
      • 本番環境ビルド時のバンドルサイズの削減
    • Nitro CLI の改善
    • Firebase 2nd Gen プリセット
  • 2023-08-25 Nuxt 3.7 リリース
    • unjs/citty で書き直された新しい CLI nuxi
      • Composable や Plugin といった Nuxt の各種ファイルを生成可能
      • その他の機能も順次追加されている
    • unjs/nitro の改善により Native Web Streams と Response オブジェクトによるレスポンスをサポート
      • Nuxt で Streams をネイティブに扱えるように
    • (experimental) HTML のレンダリングの改善
      • リソースを preload するか prefetch するかをビルド時に決定するように
      • unjs/unhead により <head> 内の要素 <link>, <meta>, <script>, <style> などの順序を扱えるようになり順序を最適化することでパフォーマンスを向上
    • nuxt.config.ts$client$server によりクライアント側とサーバー側で特定の設定を利用できるように
    • Vite 4.4 対応
    • TypeScript 関連のアップデート
      • tsconfig.json のパスを相対パスにし、Docker image 等の環境でも IDE のサポートを受けられるように
    • (experimental) Async Context support
      • Nuxt の組み込みコンポーザブルを setup 内に限らずサーバー側でも呼び出せるように('Nuxt context unavailable' のエラーが出ていた場合解決する可能性)
      • サーバー Route で使用可能な useEvent ユーテリティを追加
    • unjs/nitro v2.6 に対応
      • より軽量なサーバーと、永続的なストレージとして .data ディレクトリの使用など

⚡️Vite 関連

🗓2023年9月

🔼Nuxt 関連

  • 2023-09-07 NuxtLabs UI が Nuxt UI に名称変更
  • 2023-09-22 Nuxt Content のドキュメントサイトを公開
  • 2023-09-26 Nuxt UI Figma Kit 公開
    • Nuxt UI のデザインシステムを利用可能な Figma Kit

🔽Vue.js 関連

  • 2023-09-02 FormKit 1.0 リリース
    • Form フレームワーク
  • 2023-09-12 Vue.js Certification が正式公開
    • 公式の開発スキルの認証制度
  • 2023-09-27 Oku v0.5 リリース
    • Radix UI / Primitives と1:1で対応する Vue Components

🗓2023年10月

🔼Nuxt 関連

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

  • 2023-10-03 Nuxt UI v2.9 リリース
  • 2023-10-03 Nuxt Studio v1.0 リリース
    • Nuxt Studio は Git ベースで Nuxt Content によるサイトを構築するCMSのサービス
    • 共同開発、Live Preview などの機能を提供
  • 2023-10-03 Nuxt Bridge v3.0 RC1 リリース
    • Nuxt Bridge は Nuxt 2 と Nuxt 3 の差分を減らし、移行を行いやすくするツール
    • TypeScriptのサポートの改善
    • パフォーマンスの向上(特にNitroとViteの統合)
    • 安定性の向上
  • 2023-10-13 Nuxt の edge リリースチャンネルを nuxt-nightly に名称変更
    • Nightly Release Channel
      • devDependencies"nuxt": "npm:nuxt-nightly@latest" を指定
      • @​nuxt/kit-edge@​nuxt/kit-nightly に変更された
      • nuxi も npx nuxi-nightly@latest [command] で利用可能
  • 2023-10-18 Nuxt 公式サイトがリニューアル
    • 新しいデザイン
    • ナビゲーションの改善
    • 各組み込みコンポーネント等に Source Code ボタンを追加し GitHub 上のソースコードを確認できるように
    • 検索機能の強化
    • nuxt/nuxt.com リポジトリをオープンソース化
  • 2023-10-19 Nuxt DevTools 1.0 リリース
  • 2023-10-19 Nuxt Image v1.0 リリース
    • Nuxt Image v1.0 は Nuxt 3 用の画像最適化モジュール(Nuxt 2 用は v0
    • <img>, <picture><NuxtImg>, <NuxtPicture> に入れ替えて使用可能
    • 画像最適化ツール unjs/ipx をビルトイン(内部的に sharp, svgo を使用)
  • 2023-10-19 Nuxt 3.8 リリース
    • Nuxt CLI nuxi の改善
      • nuxi module add <module-name> でモジュールインストールが可能に
      • その他 nuxt/cli v3.9対応
    • Nuxt DevTools をビルトイン
    • <NuxtImg><NuxtPicture> を第一級の組み込みコンポーネントとして追加
      • 利用時に @nuxt/image を自動的にインストール
    • 深い階層の Layout コンポーネントのインポート
      • それぞれ下記のような Layout name でインポートされる(componentsと同様)
        • ~/layouts/desktop/default.vue'desktop-default'
        • ~/layouts/desktop-base/base.vue'desktop-base'
        • ~/layouts/desktop/index.vue'desktop'
    • App Manifest のサポート
      • /_nuxt/builds/meta/<buildId>.json に生成される
    • Scope と Context の改善
      • プラグイン内で実行された Nuxt composables をサイト外への遷移時に自動的にクリーンアップ
      • (experimental) Async Context での Vue Composition API をサポート
        • Nuxt instance unavailable のエラーを解決するかも
    • defineNuxtLink ユーティリティ
      • 独自の <NuxtLink> を作成できるように
    • useFetch の強化
      • deep: falseshallowRef 相当のリアクティビティを使用可能になり、大きな配列やオブジェクト等でのパフォーマンスを改善
      • getCachedData オプションで独自のキャッシュを制御可能に
        • getCachedData: key => nuxtApp.payload.static[key] ?? nuxtApp.payload.data[key] でペイロードに key がある場合は再 fetch しない
      • nuxt.config.ts 内で useFetch のオプションのデフォルトを設定可能に
    • Nuxt Layers の強化
      • Layer のプラグインやミドルウェアの読み込み順序を改善(アプリケーション内の読み込みが最後)
      • リモートの Layer を使用している場合 node_modules 内に clone されるように
    • unjs/nitro v2.7 に対応
    • Type インポートの変更
      • Vue コンパイラが props などの型のインポートを正しく最適化して解決するため、型のインポートを明示的にするよう変更してください
        • import { FooType } from '@/types'import type { FooType } from '@/types'

🔽Vue.js 関連

  • 2023-10-04 Radix Vue v1.0 リリース
    • Radix Vue は Radix UI の Vue 対応
    • 高品質なデザインシステムやウェブアプリケーションを構築するための、スタイルのない Vue components

⚡️Vite 関連

ViteConf 2023 において Evan You氏によるプレゼンテーションで、今後の Vite の方向性が発表されました。
そのなかで Rust 製の Rollup ともいえる Rolldown の構想が明らかに。将来的に本番環境と開発環境のビルドに差分がなくなるよう開発されています。

🗓2023年11月

🔼Nuxt 関連

🔽Vue.js 関連

⚡️Vite 関連

https://vitejs.dev/blog/announcing-vite5

🗓2023年12月

🔼Nuxt 関連

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

  • 2023-12-09 Nuxt OG Image v3.0.0-rc.0 リリース
    • Nuxt OG Image v3 による書き換え
    • 新しい Playground
    • 型安全な defineOgImageComponent
    • UnoCSS, Theme, 絵文字のサポート
    • JPEG OG Image
    • Nuxt Content との統合
    • OG Image Route Rule
  • 2023-12-11 @tresjs/nuxt 2.0 リリース
  • 2023-12-12 Nuxt Templates 公開
    • コミュニティによるテンプレート
  • 2023-12-13 Nuxt Security v1.0 リリース
    • Nuxt Security はHTTPヘッダとミドルウェアにより OWASP のセキュリティ・パターンと原則に従うように自動的に構成する Nuxt モジュール
  • 2023-12-19 @​nuxt/test-utils v3.9 リリース
    • nuxt/nuxt リポジトリから分離しリリースサイクルを変更
    • nuxt-vitestvitest-environment-nuxt@nuxt/test-utils と統合
    • 公式ドキュメント Nuxt testing の更新
  • 2023-12-25 Nuxt i18n v8.0 リリース
  • 2023-12-25 Nuxt 3.9 リリース
    • Vite 5 対応
    • Vue 3.4 対応
    • (experimental) Interactive Server Components
      • Nuxtサーバーコンポーネント内でインタラクティブコンポーネントを操作できるように
      • 例えば Server Component 内で <NuxtLink :to="/" nuxt-client />
    • Vite の AST 認識 define を使い、サーバー側のコードでより正確な置換を行うように
      • これまでたとえば document のような一般的な用語の置換ができませんでしたが、Vite の define が AST を認識するようになったため安全に置換できるようになりました
    • より多機能な Loading API
      • <NuxtLoadingIndicator>useLoadingIndicator
    • callOnce ユーティリティ
      • リクエスト時はサーバー側で呼ばれる一方クライアント側のハイドレーション時には呼ばれず、クライアント側のナビゲーション時は都度呼ばれる記述が可能
    • Error の型を改善
    • Schema Performance

🔽Vue.js 関連

https://blog.vuejs.org/posts/vue-2-eol

https://blog.vuejs.org/posts/vue-3-4

  • 2023-12-25 Vue 2.7.16 "Swan Song" リリース
    • Vue 2.x.x 最終リリース
    • 有料の延長サポートを受けるためにはアップデート必須
  • 2023-12-28 Vue 3.4 リリース
    • テンプレートのパーサーとビルドのパフォーマンスの向上
      • あらゆるサイズのテンプレートも2倍高速に
      • ソース マップの生成中に Vue SFC のスクリプトとテンプレート部分をコンパイルする際に最大 44% の向上が示されているため、Vue SFC を使用するほとんどのプロジェクトのビルドが高速化される想定
    • より効率的なリアクティビティ
      • computed の再計算効率化と、それに伴うリアクティビティのリファクタリングを実施
      • 計算結果が変更された場合のみコールバックが起動するように最適化
      • 配列の shift, unshift, slice メソッドで effect は1度だけトリガーされるように
    • defineModel の安定
    • 同名の変数による v-bind の短縮記法
      • <img :id="id" :src="src" :alt="alt"><img :id :src :alt>
    • ハイドレショーンエラー時のメッセージを改善
      • 文言の変更とDOMノードの追加
      • class や style 等の属性のチェックが行われるように
    • プロダクションエラーコードのリファレンスドキュメント
  • 2023-12-31 Vue2 サポート終了

⚡️Vite 関連

最後に

Vue.js, Nuxt, Vite 関連の情報をまとめました。
主だったものだけで、これだけ多数のアップデートがあり、コントリビューターをはじめ関わっている方々には感謝してもしきれません。

2024年は Vue 3 も Nuxt 3 もますます発展していく年になることでしょう。
とても楽しみにしています。

Vue・Nuxt 情報が集まる広場 / Plaza for Vue・Nuxt.

Discussion