Zenn
Vue・Nuxt 情報が集まる広場 / Plaza for Vue・Nuxt.Publicationへの投稿
📅

Vue.jsと周辺エコシステムで振り返る2024年

yamanoku
2024/12/09に公開
2件
Vue.js
tech

Vue Advent Calendar 2024の9日目の記事です。

この記事では2024年のVue.js、そしてそれらにまつわる周辺エコシステムについてを振り返っていきます。関連する大きな出来事や変更があったものについてを中心にまとめています（この内容も取り上げてほしい！というものがあった際は、GitHubから編集提案をください）。

Vue.js

公開10周年

https://x.com/vuejs/status/1753678155444101385

2024年はVue.jsがHacker Newsで公開されてから10周年目を迎える年でした。Vue.jsの進化の歴史については以下の通りになります。

  • 2015年10月: Vue 1リリース
  • 2016年10月: Vue 2リリース
  • 2018年9月: Vue 3の開発が開始
  • 2020年9月: Vue 3リリース
  • 2022年1月: Vue 3がデフォルトになる、ドキュメントもVue 3がメインに
  • 2023年12月: Vue 2がEoLを迎える

また、今年の9月の時点でnpmからの総ダウンロード数が10億を突破しました。

https://x.com/vuejs/status/1840300340383756759

Vue 3.5

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

9月にVue 3.5がリリースされました。コードネームは「Tengen Toppa Gurren Lagann」です。このリリースでは以下の変更が含まれています。

  • リアクティブシステムの最適化: パフォーマンスが向上し、メモリ使用量が大幅に削減されました
  • リアクティブプロップのデストラクチャリング: definePropsからデストラクチャリングされた変数がリアクティブになりました
  • SSRの改善: 遅延ハイドレーションやuseId()などの新機能が追加されました
  • カスタムエレメントの改善: defineCustomElement APIに新機能が追加されました
  • 新しいAPI追加
    • useTemplateRef()
    • Deferred Teleport
    • onWatcherCleanup()

Vapor Mode

Vapor ModeはFine Grained Reactivityの概念を取り入れた仮想DOMを使用しない新たなVue.jsのコンパイル戦略です。Vaporを実装しているVue.jsは現在本体とは別リポジトリで運用されております。

コンポーネントに関する実装のTODOはほぼ完了となりクローズされております。ロードマップも公開されており、今年末までにはVitePressコードをVaporで差し替え、ベータ版を公開する予定とのことです。

https://x.com/sanxiaozhizi/status/1857155901532320202

VitePress内にVaporを組み込むのは現在進行中で、Issueとリポジトリにて進捗が確認できます。

Vue Router

https://router.vuejs.org/

Vue RouterはVue.jsの公式ルーターライブラリです。

v4.4.0よりRouteNamedMapによる型付きルートのネイティブ・サポートが導入されました。unplugin-vue-routerなしでマップを定義し、型を自動的に推論させることができるようになりました。

v4.5.0よりRouterLinkにview-transition Propが追加されました。

Vitepress

https://blog.vuejs.org/posts/vitepress-1.0

VitePressは、Vite製の静的サイトジェネレータ（SSG）です。今年よりv1.0がリリースされました。

Pinia

https://pinia.vuejs.org/

PiniaはVue.jsの状態管理ライブラリです。

12月4日にリリースされたv2.3.0によるとVue 2.7が必要になるのと、2025年1月に登場するPinia 3.0では、Vue 2のサポートを終了する予定とのことです。

Vue DevTools

https://x.com/vuejs/status/1850796839295176969

Vue DevtoolsはVue.jsのデバッグがブラウザ上でできるChrome拡張機能です。v7からはVue3のみをサポートするようになりました。そのためVue2でデバッグする際はv5やv6を別途使用する必要があります。

eslint-plugin-vue

https://eslint.vuejs.org/

Vue.jsのESLint pluginであるeslint-plugin-vueでは、以下の新たなルールが追加されました。

そのほかVue3.4からのv-bind same-name shorthandとdefineModelのサポートが追加されたり、Flat ConfigサポートやESLint v9をpeer dependencyとして追加するなどの変更も行われました。

Vue Language Tools

https://github.com/vuejs/language-tools

Vue Language ToolsはVSCodeでのVue関連の開発支援する拡張機能、VueファイルのTypeCheckをしてくれるツールなどを提供しているリポジトリです。

Vue Language Toolsの基盤となっているVolarのv2.0.0が今年リリースされました。Takeover Modeは廃止され、Vueファイルに対するすべてのTS機能を引き継ぐHybrid Modeが導入され、vue-tscを書き換えてメモリ使用量を大幅に削減するなどの変更が加えられました。

VueUse

VueUseはVue.jsのComposition APIを用いて作られたユーティリティライブラリです。

https://vueuse.org/

今年はv11、v12のメジャーバージョンアップがありました。v12よりVue2のサポートを終了し、Vue3のみをサポートするようになりました。

Vue I18n

Vue I18nはVue.jsの国際化（i18n）ライブラリです。

https://github.com/intlify/vue-i18n/releases/tag/v10.0.0

v10.0.0では軽量版のpetite-vue-i18n、JITコンパイルの有効化がデフォルトに、設定されたLocaleに合わせた型生成、レガシー APIモードの$tとtのオーバーロードシグネチャの変更などがされました。

次期バージョンのv11からはLegacy API modeの非推奨化や、v10から非推奨としていた$tcとtcのAPI廃止が計画されています。

UI フレームワーク

Vue.jsにまつわるUIフレームワークやコンポーネントライブラリで大きな変更があったものについてを取り上げます。

PrimeVue

PrimeVueはPrimeFacesというカスタマイズ可能なUIコンポーネントライブラリを提供するプロジェクトのVue.js版です。

https://x.com/primevue/status/1833504714908176650

2024年9月時点でnpmでの月間100万ダウンロードを突破しました。

今年はフォームを構築できるForm ライブラリ、Figma UI Kit、コピーペーストで使用できるUI群のPrime BlocksのVue.js版が公開されました。

Vuetify

https://vuetifyjs.com/en/blog/state-of-the-union-2024/

Vue.jsのコンポーネントライブラリとして有名なVuetifyが、認証と状態管理のためのツールであるVuetify One、コード共有ツールであるVuetify Bin、プレグラウンドツールであるVuetify Playground、Vuetifyを使ったUIスニペット集を公開するサイトであるVuetify Snipsといったエコシステムツールやサイトが公開されました。

https://x.com/vuetifyjs/status/1859672959822201020

11月にはVuetifyのテーマエディターでもあるVuetify Studioがリリースされました。

Oku UI

https://oku-ui.com/

Vue.js、Nuxt利用できるUIコンポーネントライブラリであるOku Primitivesを公開しているOku UIで、モーションにまつわるライブラリのOku Motion、NuxtとNitro Kitでフルスタックアプリケーション開発ができるようになるPergelが今年公開されました。

Unovue

https://unovue.com/

Vueのコンポーネントやユーティリティ集であるUnovueが公開されました。

現在、ヘッドレスコンポーネントのRadix VueをリブランドしたReka UI、再利用可能なVueコンポーネント群のInspira UI、shadcn/ui非公式のコミュニティ主導でのVue移植版であるshadcn-vueがまとめられています。

GovUK Vue

https://govukvue.org/

イギリス政府のデザインシステムであるGOV.UK Design SystemをVueコンポーネントを提供する非公式プロジェクトが公開されました。

Storybook

https://storybook.js.org/blog/first-class-vue-support-storybook-8/

コンポーネントカタログツールのStorybookでのv8からは、Vue公式のLanguage ToolsであるVolarを活用してStorybookとVue.jsの連携が強化されました。docgenではvue-component-metaを使用するようになりました。VueプロジェクトにおいてReactをpeer dependencyとしてインストールする必要もなくなりました。

v0 for Vue

https://x.com/v0/status/1834036748932055175

Vercelが提供するAI駆動型のUI生成ツール「V0」がVue.jsでのアプリケーション生成に対応しました。

The State of Vue.js 2025 Survey

The State of Vue.js Report 2025 - Developer Survey

Vue.jsの開発者向けサーベイが公開されました。Vue.jsやNuxtの利用状況や課題についての項目についてを回答できます。この結果を元に来年には「The State of Vue.js Report 2025」としてレポートが公開される予定です。英語での回答になりますが、日本のVue.js、Nuxt開発者もサーベイに参加してみましょう。

同日のNuxt / UnJS Advent Calendar 2024ではNuxtと周辺のエコシステムについての2024年を振り返っています。こちらも併せてご覧になってみてください。

Nuxt/UnJSと周辺エコシステムで振り返る2024年

GitHubで編集を提案
Vue・Nuxt 情報が集まる広場 / Plaza for Vue・Nuxt.
Vue・Nuxt 情報が集まる広場 / Plaza for Vue・Nuxt.Publication

「Vue / Nuxt利用者が気軽に情報を得ることができ、またVue / Nuxt初学者がまずここを訪ねてみる」 と思える、そんなVue / Nuxtの情報が集まる広場。ハードルは低く、わちゃわちゃと知見が集まる広場へ。 ✍️ Articles: Vue, Nuxt, related libraries

Discussion

junerjuner

vue/enforce-style-attribute のリンクが 誤っていますでしょうか？

yamanokuyamanoku

ありがとうございます。vue/no-deprecated-delete-set のURLとで取り違えていたのでリンク先の修正をいたしました。