Migrate existing tools

Start with the Vite plugin, build your app, then enable checks. Keep existing custom rules and editor tooling until you have compared results on your project. Vize is actively developed; this guide does not claim complete option or diagnostic parity.

Choose what to replace

The last three commands are generated by the Vite+ helper. They are custom tasks, distinct from built-in vp lint, vp fmt, and vp check.

Vite+ project

Install Vize into an existing Vue/Vite+ project:

vp install -D @vizejs/vite-plugin

Change vite.config.ts:

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

export default defineConfig({
  plugins: [vue()],
  compiler: {},
  server: { port: 3000 },
});

The helper registers the Vize compiler and native tasks. Preserve unrelated plugins, aliases, server settings, and tests. An empty compiler object uses the defaults; you can also omit it.

Move supported plugin options to compiler, rather than retaining two Vue compilers:

  plugins: [vue({ template: { compilerOptions: { whitespace: "preserve" } } })],
  compiler: { whitespace: "preserve" },

Check plugin option coverage before moving other options. Vue 2 compatibility modes and experimental bundlers have a different scope.

Run a production build and compare the checks:

vp build
vp run typecheck
vp run lint
vp run fmt:check
vp run check

Generated task names avoid existing package scripts. If check already exists, run vp run vize:check; explicit run.tasks definitions also take precedence. See task names before replacing a CI command.

Ordinary Vite: replace only the compiler

Keep defineConfig from vite and replace the plugin:

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vize from "@vizejs/vite-plugin";

export default defineConfig({
  plugins: [vue()],
  plugins: [vize()],
});

vp install -D @vizejs/vite-plugin
vp exec vite build

Your lint, formatter, and type-checking commands continue to use their existing tools. Vite plugin options live directly in vize({ ... }). Adopt the Vite+ helper later if you want combined tasks.

Replace a check command after comparing output

In a Vite+ project using the helper, these literal script changes opt into the native tasks. Test each change independently:

  "typecheck": "vue-tsc --noEmit",
  "typecheck": "vp run vize:typecheck",
  "lint": "eslint src",
  "lint": "vp run vize:lint",
  "format": "prettier --write src",
  "format": "vp run fmt"

An existing typecheck or lint script makes the helper generate vize:typecheck or vize:lint. Use those collision-safe names in the actual replacement:

{
  "scripts": {
    "typecheck": "vp run vize:typecheck",
    "lint": "vp run vize:lint",
    "format": "vp run fmt"
  }
}

Keep custom ESLint rules that have no equivalent, compare type diagnostics, and review the formatter diff before changing CI. Formatting writes files; vp run fmt:check checks first without writing.

Migrate standalone config into Vite+

Only a standalone CLI/LSP workflow needs a separate vize.config.ts. For integration tasks, move these settings into vite.config.ts:

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

export default defineConfig({
  linter: { preset: "essential" },
  formatter: { printWidth: 100 },
  typeChecker: { strict: true },
  lint: { vize: { preset: "essential" } },
  fmt: { vize: { printWidth: 100 } },
  typecheck: { strict: true },
});

Move the settings, not just the import: the field names differ. Preserve a standalone config when a separate CLI/LSP consumer still needs it. See Configuration for the canonical location per integration.