はじめる

Vite+ を使って Vue 3 アプリに Vize を導入します。ツールの設定は vite.config.ts に、TypeScript のプロジェクト設定は tsconfig.json にまとめます。Vize は開発中です。導入前にサポート状況を確認してください。

構成を選ぶ

1. 統合パッケージをインストールする

Vite+ を導入済みの Vue プロジェクトで実行します。

vp install -D @vizejs/vite-plugin

プロジェクトの Vite+（0.2.3 以降）を使います。通常の Vite は Vite プラグインの移行、Nuxt は Nuxt 統合を参照してください。

2. vite.config.ts を変更する

統合用の defineConfig がコンパイラと検査タスクを追加します。既存の Vue プラグインの import と plugins 内の vue() を削除し、alias、server、test、その他のプラグインは残します。移行ガイドに変更前後の例を載せています。

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({});

3. アプリをビルド・検査する

vp dev
vp build
vp run lint
vp run fmt:check

.vue の型チェックは Content Mapper を使います。TypeScript 7.1 と tsrs は同じ tsconfig.json を使います。tsrs は drop-in です。contentMappers はそのままに、実行ファイルだけ変えます。

tsc --runExternalCode --noEmit -p tsconfig.json
tsrs --runExternalCode --noEmit -p tsconfig.json

マッパーの書き方と vue-tsc からの置き換えは型チェックにあります。vp run check は同梱チェッカーに lint とフォーマットを足して実行します。vp run typecheck はそのチェッカーだけです。

修正を適用するには vp run check -- --fix を実行します。

Warning

vp check ではなく vp run check を使ってください。組み込みの vp check・vp lint・vp fmt は Vite+ 自身のツールを実行し、Vize の Vue のチェックは行いません。

既存のスクリプトは保持され、生成タスクは vize:<名前> になります。タスク名と上書きを確認してください。

次にやりたいこと

• Content Mapper で Vue ファイルを型チェックする。TypeScript 7.1 と tsrs のどちらでも実行できます。コマンドは型チェックにあります。
• ルールやコンパイラーの設定を変更する。
• 既存のツールから移行する。変更前後の例を確認できます。
• lint の指摘を理解する。Vue の問題例と修正例を掲載しています。
• Vapor モードを試す。コンポーネント単位で切り替えられます。
• コンポーネントを探す。使い方と API を確認できます。
• Musea でコンポーネントをプレビューする。
• エディターを設定する。VS Code、Zed、Neovim などに対応しています。
• JSR から JavaScript API を使う。Node・Deno・Bun で利用できます。

Note

CLI・Vite 連携・エディターは vite.config.* の vue: 設定を共有し、tsconfig.json の TypeScript プロジェクト設定と vueCompilerOptions を利用します。専用の vize.config.* ファイルとトップレベルの vize: 設定は廃止されました。移行方法は設定ガイドを参照してください。

Vite+ なしで利用する

lint とフォーマットは、単独 CLI でインストールせずに試せます。

vpx vize lint src
vpx vize fmt --check src

型チェックは Vize の content mapper を入れ、TypeScript 7.1 で実行します。tsrs は同じプロジェクトの drop-in です。

tsc --runExternalCode --noEmit -p tsconfig.json
tsrs --runExternalCode --noEmit -p tsconfig.json

vpx vize check は同梱チェッカーです。対象パッケージのルートから実行し、TypeScript のプロジェクト設定は tsconfig.json に残します。ネイティブコマンドも vite.config.* のトップレベルの vue 設定を共有できます。検索規則と現在の範囲は CLI の設定を参照してください。

対話形式で導入する場合は、vpx vize init --dry-run で変更予定を確認し、vpx vize init で機能を選びます。プロジェクトの初期設定に、プロジェクトの検出方法と、設定を自動編集できない場合の対応をまとめています。init は既存のプロジェクト設定と既定値を使い、専用の Vize 設定ファイルは作成しません。