フレームワークレベルでの新しい推奨事項

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 への移行に関する情報はこちら:

• VueSchool.io による Vue CLI -> Vite の移行ガイド
• 自動移行に役立つツールやプラグイン

新しいドキュメントのツールガイドの章も参照してください。

Vue Router

Vue Router 4.0 は Vue 3 のサポートを提供し、多くの破壊的変更があります。詳細については、その移行ガイドを確認してください。

• ドキュメント
• GitHub
• RFC

状態管理

Pinia は、新しく推奨される大規模な状態管理ソリューションです。Pinia は Vuex 5 のプロトタイプとして作成されましたが、現在では Vuex 5 で計画していたものの事実上の実装に発展しています。コアチームのメンバーである Eduardo による作業量に敬意を表して、元の名前を残すことにしました。

• ドキュメント
• GitHub
• 新しいドキュメントの状態管理の章

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 をインストールした場合は、それを削除して、安定版チャンネルから拡張機能をインストールできます。

• ドキュメント
• GitHub

TypeScript のサポート

vue-tsc を使って、コマンドラインから Vue SFC の型チェックと定義ファイルの生成ができるようになりました。

新しいドキュメントの TypeScript ガイドも参照してください。

静的サイトジェネレーター

VitePress は、VuePress の精神的後継で、Vue 3 + Vite で構築されています。はるかに優れた開発体験を提供し、より高速なサイトを作成できます。

JSX

@vue/babel-plugin-jsx によって Vue 3 の JSX サポートが提供されるようになりました。