フレームワークレベルでの新しい推奨事項
Vue 3 をサポートするライブラリーが大幅に更新されました。新しいデフォルトの推奨ライブラリーの概要は以下のとおりです:
- Vue 3 をサポートした Router, Devtools, test utils の新バージョン
- ビルドツールチェーン: Vue CLI -> Vite
- 状態管理: Vuex -> Pinia
- IDE サポート: Vetur -> Volar
- 新しいコマンドライン TypeScript サポート: vue-tsc
- SSG: VuePress -> VitePress
- JSX:
@vue/babel-preset-jsx->@vue/babel-plugin-jsx
詳細
ビルドツールチェーン
Vue 3 プロジェクトの新しいビルドツールチェーンとして、Vite を推奨することになりました。Vite は、非常に高速なサーバー起動とホットアップデートのパフォーマンスを提供する新しいビルドツールです。元々は Vue チームによって作られたものですが、現在はクロスフレームワークのツールとなっています。詳細は Vite を推奨する理由をご覧ください。
新しいスキャフォールディングツールである create-vue を使って、Vite を搭載した新しい Vue 3 プロジェクトを作成できます:
npm init vue@3
Vue CLI も Vue 3 をサポートするようアップグレードされましたが、現在はメンテナンス中であり、新しいプロジェクトには推奨されなくなりました。Vue CLI から Vite への移行に関する情報はこちら:
新しいドキュメントのツールガイドの章も参照してください。
Vue Router
Vue Router 4.0 は Vue 3 のサポートを提供し、多くの破壊的変更があります。詳細については、その移行ガイドを確認してください。
状態管理
Pinia は、新しく推奨される大規模な状態管理ソリューションです。Pinia は Vuex 5 のプロトタイプとして作成されましたが、現在では Vuex 5 で計画していたものの事実上の実装に発展しています。コアチームのメンバーである Eduardo による作業量に敬意を表して、元の名前を残すことにしました。
Vuex 4.0 は、3.x とほぼ同じ API で Vue 3 もサポートしており、既存の Vuex ストアを Vue 3 に移行する必要がある場合に利用できます。唯一の破壊的変更は、プラグインのインストール方法です。
IDE サポート
Volar は、テンプレート式の完全な型推論を含む、Vue SFC の TypeScript サポートが大幅に改善された、新しい公式 VSCode 拡張になりました。
Volar との競合を避けるため、Vetur をインストールしている場合は必ず無効にしてください。
Devtools 拡張機能
Devtools 拡張機能は、Vue 2 と Vue 3 の両方をサポートするためのメジャーアップデート（v6 としてリリース）がありました。以前にベータチャンネル経由で v6 をインストールした場合は、それを削除して、安定版チャンネルから拡張機能をインストールできます。
TypeScript のサポート
vue-tsc を使って、コマンドラインから Vue SFC の型チェックと定義ファイルの生成ができるようになりました。
新しいドキュメントの TypeScript ガイドも参照してください。
静的サイトジェネレーター
VitePress は、VuePress の精神的後継で、Vue 3 + Vite で構築されています。はるかに優れた開発体験を提供し、より高速なサイトを作成できます。
JSX
@vue/babel-plugin-jsx によって Vue 3 の JSX サポートが提供されるようになりました。