Getting Started

Add Vize to your Vue 3 app with Vite+. Keep tool settings in vite.config.ts and the TypeScript project in tsconfig.json. Vize is under active development; review the support status before adoption.

1. Install the integration

Run this in an existing Vue project with Vite+ installed:

vp install -D @vizejs/vite-plugin

The integration uses your project's Vite+ version (0.2.3 or newer). For ordinary Vite, use the Vite plugin migration; for Nuxt, use the Nuxt integration.

2. Update vite.config.ts

The helper adds Vize's compiler and native check tasks. Remove the old Vue plugin import and vue() from plugins; preserve aliases, server settings, tests and unrelated plugins. The migration guide shows complete before/after examples.

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

export default defineConfig({});

3. Build and check your app

vp dev
vp build
vp run check

vp run check combines Vue type checking, lint and formatting with Oxlint and Oxfmt. Use focused tasks during development:

vp run typecheck
vp run lint
vp run fmt:check

Apply fixes with vp run check -- --fix. Use vp run for Vize's generated tasks: built-in vp check, vp lint and vp fmt run Vite+'s own tools. If a script already exists, Vize preserves it and generates vize:<name>; see task names and overrides.

Choose your next step

• Configure a rule or compiler option.
• Migrate existing tools with complete before/after examples.
• Understand a lint diagnostic with bad and good Vue examples.
• Explore components with recipes and the component reference.
• Preview your components with Musea art files and the gallery.
• Set up your editor with shared native settings.
• Use the JavaScript APIs through JSR from Node, Deno or Bun.

Note

Vize 0.457.0 supports shared Vite configuration in the native CLI and init without a dedicated Vize file. Keep the CLI, Vite integration and editor extension up to date to use the shared configuration workflow. The reference covers discovery, precedence and optional dedicated formats.

Use Vize without Vite+

The standalone CLI provides vize lint, vize fmt and vize check. Run from the target package root and keep the TypeScript project in tsconfig.json. Native commands can share top-level vize settings in vite.config.*; see CLI configuration for discovery and its current scope.

Preview interactive setup with vpx vize init --dry-run, then run vpx vize init to select features. Project Setup explains detection and editing limits. Init uses project settings and defaults; it does not create a dedicated Vize config.