Unofficial High-Performance Vue.js Toolchain in Rust

/viːz/ — Named after Vizier + Visor + Advisor: a wise tool that sees through your code.

Documentation ・ Playground ・ Sponsor

Warning

Vize is under active development. APIs, package boundaries, and editor features are still moving.

Important

For day-to-day editor support, keep using the official Vue language tools (vuejs/language-tools) for now. Vize's VS Code extension, Zed extension, and vize lsp default to opt-in capabilities so teams can adopt them gradually.

What Ships Today

• Rust workspace crates for parsing, semantic analysis, compilation, linting, formatting, type checking, LSP, Musea art tooling, and bindings
• A full Rust CLI available from GitHub release artifacts and the Nix workspace build (build, fmt, lint, check, ready, musea, lsp, ide)
• npm packages including @vizejs/vite-plugin, @vizejs/native, @vizejs/wasm, @vizejs/unplugin, @vizejs/rspack-plugin, @vizejs/nuxt, @vizejs/vite-plugin-musea, @vizejs/musea-mcp-server, and oxlint-plugin-vize
• The vize npm package for shared config utilities and native build, fmt, lint, check, ready, and upgrade commands
• Nuxt dev integration that preserves URL-encoded asset links while removing broken or unsafe stylesheet references from rendered HTML

Quick Start

Need vp first? Install Vite+ once from the Vite+ install guide.

Vite

vp install -D vize @vizejs/vite-plugin

// vite.config.ts
import { defineConfig } from "vite";
import vize from "@vizejs/vite-plugin";

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

// vize.config.ts
import { defineConfig } from "vize";

export default defineConfig({
  linter: {
    preset: "opinionated",
  },
  lsp: {
    lint: true,
    typecheck: false,
    editor: false,
    formatting: false,
  },
});

npm CLI

The npm vize package exposes native CLI commands plus shared config helpers:

vp install -D vize
vp exec vize fmt --write src
vp exec vize lint src
vp exec vize lint --format ansi src
vp exec vize lint --format agent src
vp exec vize check
vp exec vize build src
vp exec vize ready src

Full Rust CLI

For v1 alpha, use the prebuilt GitHub release binaries or the Nix entry point for the full native CLI. The Rust CLI is not a supported crates.io install channel yet.

nix run github:ubugeeei/vize#vize -- --help

vize build src/**/*.vue
vize fmt --check src
vize lint --profile src
vize check --profile src
vize ready src
vize lsp

You can also download platform-specific binaries from GitHub Releases.

Static Analysis

Vize shares the same parser and semantic analysis layers across linting, type checking, editor diagnostics, compilation, and Musea metadata.

vp exec vize lint --preset happy-path src
vp exec vize lint --preset essential --max-warnings 0 src
vp exec vize check src

Use the Rust CLI for the fuller project-backed type-checking surface:

vize check --tsconfig tsconfig.app.json
vize check --show-virtual-ts src/components/App.vue
vize check --declaration --declaration-dir dist/types

vize lint runs Patina rules for Vue templates, scripts, CSS, a11y, SSR, Vapor, Musea, cross-file, and type-aware checks. Security-oriented Vue rules include vue/no-unsafe-url, which checks dynamic URL bindings and static URL attributes for executable schemes such as javascript:, vbscript:, and active data: payloads. Anchor accessibility checks share the same scheme normalization for static href values, so case changes or HTML-decoded control characters do not hide javascript: links. vize check generates virtual TypeScript for Vue SFCs and maps project diagnostics back to the original source files.

Patina output can be transformed with --format text, ansi, plain, json, stylish, markdown, html, or agent. Human and agent-oriented report formats include a local rule documentation path such as docs/content/rules/vue.md so commit hooks and coding agents can jump directly to the reference.

Use vize lint --profile src when tuning rule cost. Profile output now starts with a strict audit that calls out untracked wall time, slow-threshold hits, cumulative worker time, and captured internal spans. Hot-file rows include wall share, per-stage share, throughput, and slow-threshold status, while internal operation rows include wall share and max/avg spike detection. Type-aware lint profile rows include template query collection and Corsa probe phases so expensive cross-rule work can be spotted quickly. When template unsafe-binding and floating-Promise checks are both enabled, shared expression parsing keeps their query collection from doing duplicate OXC work. SSR browser-global diagnostics also avoid common literal-boundary false positives such as strings, regexes, comments, and direct typeof window guards.

Compiler Configuration

The npm CLI and Vite plugin share vize.config.*:

import { defineConfig } from "vize";

export default defineConfig({
  compiler: {
    sourceMap: true,
    vapor: false,
    customRenderer: false,
  },
  vite: {
    scanPatterns: ["src/**/*.vue"],
  },
  linter: {
    preset: "happy-path",
  },
  typeChecker: {
    enabled: true,
    strict: true,
  },
});

Direct vize() options override shared config for Vite. See the docs for compiler options, project scanning, lint presets, type-checker settings, and Musea config.

Oxlint Integration

oxlint-plugin-vize lets Oxlint execute Vize Patina diagnostics through Oxlint's JS plugin system.

vp install -D oxlint oxlint-plugin-vize
vp exec oxlint-vize -c .oxlintrc.json -f stylish src

This keeps Oxlint's core JS and TS rules active while adding Vue-aware diagnostics under the vize/* namespace.

Musea Component Gallery

Musea uses *.art.vue files to describe component variants with Vue-native syntax, then serves a gallery through Vite.

vp install -D @vizejs/vite-plugin @vizejs/vite-plugin-musea vize

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

export default defineConfig({
  plugins: [
    vize(),
    musea({
      include: ["src/**/*.art.vue"],
      basePath: "/__musea__",
      previewCss: ["src/styles/main.css"],
    }),
  ],
});

vp dev
vp exec musea-vrt --base-url http://localhost:5173 --ci --json

Musea's dev middleware is designed for local development and trusted networks. Protect the route behind your own access controls before exposing it outside that environment.

Use Musea for component documentation, prop palettes, design token views, accessibility audits, visual regression snapshots, generated variants, and Storybook-compatible output.

Editor Integration

Vize editor support is designed for incremental adoption alongside vuejs/language-tools.

Start with lint-only mode in VS Code:

{
  "vize.enable": true,
  "vize.lint.enable": true,
  "vize.typecheck.enable": false,
  "vize.editor.enable": false,
  "vize.formatting.enable": false
}

Zed can enable the same capabilities through LSP initialization options:

{
  "languages": {
    "Vue": {
      "language_servers": ["vize", "..."]
    }
  },
  "lsp": {
    "vize": {
      "initialization_options": {
        "lint": true
      }
    }
  }
}

The same feature names can be committed in vize.config.json or vize.config.pkl under lsp.

Local Development

The primary local setup is Nix + vp.

nix develop
vp install --frozen-lockfile
vp check
vp fmt
vp dev
vp build

Useful workspace tasks:

vp check
vp fmt
vp dev
vp build
vp run --workspace-root check:fix
vp run --workspace-root bench:all

Credits

This project draws inspiration from: Volar.js ・ vuejs/language-tools ・ eslint-plugin-vue ・ eslint-plugin-vuejs-accessibility ・ Lightning CSS ・ Storybook ・ OXC

Sponsors

Vize is maintained by @ubugeeei. If you find it useful, please consider sponsoring.

License

MIT