Skip to content

README.md

Latest commit

 

History

History
212 lines (151 loc) · 9.36 KB

README.md

File metadata and controls

212 lines (151 loc) · 9.36 KB

Vize

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

crates.io npm npm npm License

Warning

This project is under active development and is not yet ready for production use. APIs and features may change without notice.

Important

For day-to-day editor support, keep using the official Vue language tools (vuejs/language-tools) for now. Treat vize lsp and the VS Code extension as experimental until the LSP and type-checking behavior stabilizes.

Note

@vizejs/vite-plugin is the recommended bundler integration today. @vizejs/unplugin (rollup / webpack / esbuild) and @vizejs/rspack-plugin are available, but non-Vite integrations are still unstable and should be tested carefully before adoption. Rspack intentionally keeps a dedicated package because its loader chain, experiments.css, and HMR behavior need Rspack-specific handling instead of the shared unplugin path.

Features

  • Compile — Vue SFC compiler (DOM / Vapor / SSR)
  • Lint — Vue.js linter with i18n diagnostics
  • Format — Vue.js formatter
  • Type Check — TypeScript type checker for Vue
  • LSP — Language Server Protocol for editor integration
  • Musea — Component gallery (Storybook-like)
  • MCP — AI integration via Model Context Protocol

Quick Start

npm install -g vize

For Vite projects that want one shared config for the plugin and the npm CLI:

npm install -D vize @vizejs/vite-plugin
vize build src/**/*.vue    # Compile
vize fmt --check           # Format check
vize lint --fix            # Lint & auto-fix
vize build --profile       # Profile parse, transform, codegen, and I/O
vize lint --profile src    # Profile parse, rule hooks, Croquis, and type-aware linting
vize check --profile src   # Profile Virtual TS, Croquis, and Corsa diagnostics

--profile reports wall/cumulative timings, hot files, and internal operation rows so compiler, linter, formatter, typecheck, and Croquis costs can be compared from one output.

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

export default defineConfig({
  compiler: {
    sourceMap: true,
  },
});

See the documentation for detailed usage, Vite plugin setup, experimental bundler integrations, WASM bindings, and more.

Oxlint Integration

oxlint-plugin-vize brings Vize Patina diagnostics into Oxlint through Oxlint's JS plugin system. It is intended for teams that want Oxlint's fast JavaScript / TypeScript rules and Vize's Vue SFC rules in one terminal workflow.

Install the package with:

pnpm add -D oxlint oxlint-plugin-vize

oxlint-plugin-vize resolves the matching Vize native binding through platform-specific optional dependencies, so consumers do not need a separate @vizejs/native install.

Main features:

  • Adds Vize diagnostics under the vize/* rule namespace while keeping Oxlint core rules and the built-in vue plugin running normally.
  • Provides preset rule maps for JS/TS Oxlint configs, including configs.recommended, configs.essential, configs.opinionated, configs.nuxt, and opt-in type-aware variants.
  • Supports Patina settings through settings.vize, including locale, preset, and helpLevel.
  • Ships an oxlint-vize wrapper for terminal runs, including a temporary workaround for scriptless .vue files while upstream JS plugin coverage improves.
  • Reuses native lint results per file inside the Oxlint process so multiple enabled Vize rules do not repeatedly parse the same SFC.

Recommended terminal command:

pnpm exec oxlint-vize -c .oxlintrc.json -f stylish src

Limitations:

  • The integration is terminal-first. stylish is the recommended formatter for human-readable mixed Oxlint + Vize output.
  • Raw oxlint can miss .vue files without <script> or <script setup>; use oxlint-vize if your project has template-only SFCs.
  • Oxlint JS plugins still cannot report original template / style ranges with full fidelity in every formatter, so JSON and other machine-readable outputs should be treated as best-effort for Vize template diagnostics.
  • Oxlint core rules that depend on JavaScript bindings inside Vue templates are still tied to upstream Vue work in Oxc's Better Vue Support.
  • The SFC range and formatter limitation is tracked separately in oxc-project/oxc#20465.

Nix Flake

nix run github:ubugeeei/vize#vp -- --version
nix run github:ubugeeei/vize#vize -- --help
nix profile install github:ubugeeei/vize#vize

For local development:

nix develop
vp env install
vp install

Development Environment

The primary local setup is Nix + vp. Nix provides the Rust / WASM toolchain and the vp CLI itself, while Node.js version management stays with vp and .node-version.

nix develop
vp env install
vp install

If you want node, npm, and related shims to follow the pinned version in your shell, run vp env setup once and enable managed mode with vp env on.

Workspace Tasks

Workspace orchestration lives in the root vite.config.ts via Vite+'s run.tasks.

vp run --workspace-root check       # packages + examples + playground
vp run --workspace-root check:fix   # auto-fix JS/TS checks where supported
vp run --workspace-root fmt         # format workspace files

vp run --filter './playground' test:browser
vp run --filter './examples/vite-musea' build

Use vp run directly; mise task wrappers have been removed. npm/vscode-vize and npm/vscode-art stay outside the root vp run graph, so build those from their package directories.

Performance

Benchmarks with 15,000 Vue SFC files (36.9 MB). "User-facing speedup" = traditional tool (single-thread) vs Vize (multi-thread).

Tool Traditional (ST) Vize (MT) User-facing Speedup
Compiler @vue/compiler-sfc 9.28s 434ms 20.9x
Linter eslint-plugin-vue 65.30s patina 5.48s 11.9x
Formatter Prettier 104.08s glyph 1.32s 78.9x
Type Checker vue-tsc 22.13s canon 3.33s 6.6x *
Vite Plugin @vitejs/plugin-vue 16.98s @vizejs/vite-plugin 6.90s 2.5x **
Detailed compiler benchmark
@vue/compiler-sfc Vize Speedup
Single Thread 9.28s 3.30s 2.8x
Multi Thread 3.35s 434ms 7.7x

* canon is still in early development and the Corsa-backed diagnostics path is still catching up with vue-tsc fidelity. These numbers reflect the current native project-session implementation and will keep changing as diagnostics coverage improves.

** Vite Plugin benchmark uses Vite v8.0.0 (Rolldown). The plugin replaces only the SFC compilation step; all other Vite internals are unchanged.

Run vp run --workspace-root bench:all to reproduce all benchmarks.

bench:check also includes the diagnostics-heavy npmx.dev e2e fixture when that fixture is present, so the Corsa diagnostic mapping path stays covered.

Contributing

See the documentation for architecture overview and development setup.

Credits

This project is inspired by and builds upon the work of these amazing projects: Volar.js ・ vuejs/language-tools ・ eslint-plugin-vue ・ eslint-plugin-vuejs-accessibility ・ Lightning CSS ・ Storybook ・ OXC

Sponsors

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

License

MIT