アーカイブ

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

出典元: zenn.dev

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

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

Vue.js

公開10周年

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

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

Vue 3.5

Announcing Vue 3.5 | The Vue Point

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

Vapor Mode

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

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

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

Announcing VitePress 1.0 | The Vue Point

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

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版です。

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といったエコシステムツールやサイトが公開されました。

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

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年

アーカイブ記事のため、内容に関する更新依頼は受け付けておりませんが、誤字や脱字などありましたらご連絡ください。

この記事に関する修正依頼
トップへ戻る