Unofficial High-Performance Vue.js Toolchain in Rust
/viːz/ — Named after Vizier + Visor + Advisor: a wise tool that sees through your code.
Warning
This project is under active development and is not yet ready for production use. APIs and features may change without notice.
| Crate | Description |
|---|---|
 vize_carton |
Shared utilities & arena allocator |
 vize_relief |
AST definitions, errors, options |
 vize_armature |
Parser & tokenizer |
 vize_croquis |
Semantic analysis layer |
 vize_atelier_core |
Transforms & code generation |
 vize_atelier_dom |
DOM (VDom) compiler |
 vize_atelier_vapor |
Vapor mode compiler |
 vize_atelier_sfc |
SFC (.vue) compiler |
 vize_vitrine |
Node.js / WASM bindings |
 vize |
Command-line interface |
 vize_canon |
TypeScript type checker |
 vize_patina |
Vue.js linter |
 vize_glyph |
Vue.js formatter |
 vize_maestro |
Language Server Protocol |
 vize_musea |
Component gallery (Storybook) |
Vize crates are named after art and sculpture terminology, reflecting how each component shapes and transforms Vue code:
| Name | Origin | Meaning |
|---|---|---|
| Carton | /kɑːˈtɒn/ | Artist's portfolio case — stores and organizes tools |
| Relief | /rɪˈliːf/ | Sculptural technique projecting from a surface — AST structure |
| Armature | /ˈɑːrmətʃər/ | Internal skeleton supporting a sculpture — parsing framework |
| Croquis | /kʁɔ.ki/ | Quick sketch capturing essence — semantic analysis |
| Atelier | /ˌætəlˈjeɪ/ | Artist's workshop — compiler workspaces |
| Vitrine | /vɪˈtriːn/ | Glass display case — bindings exposing the compiler |
| Canon | /ˈkænən/ | Standard of ideal proportions — type checking |
| Patina | /ˈpætɪnə/ | Aged surface indicating quality — linting |
| Glyph | /ɡlɪf/ | Carved symbol or letterform — formatting |
| Maestro | /ˈmaɪstroʊ/ | Master conductor — LSP orchestration |
| Musea | /mjuːˈziːə/ | Plural of museum — component gallery |
# via npm (recommended)
npm install -g vize
# via GitHub
npm install -g github:vizejs/vize
# via Cargo
cargo install vize# WASM (Browser)
npm install @vizejs/wasm
# Vite Plugin
npm install @vizejs/vite-pluginmise install && mise setup
mise cli # Enable `vize` CLI command
mise dev # PlaygroundManual Setup
Prerequisites:
Setup:
# Install Rust (if not already installed)
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
# Install pnpm (if not already installed)
npm install -g pnpm
# Clone and setup
git clone https://github.com/ubugeeei/vize.git
cd vize
pnpm install
# Build CLI
cargo build --release -p vize
# The binary will be at: ./target/release/vize
# Or install to your PATH
cargo install --path crates/vize
# Run playground (optional)
pnpm -C playground devBuilding Native Bindings (for @vizejs/native):
cd npm/vize-native
pnpm buildBuilding WASM (for @vizejs/wasm):
# Install wasm-bindgen-cli
cargo install wasm-bindgen-cli
# Build WASM
cargo build --release -p vize_vitrine --no-default-features --features wasm --target wasm32-unknown-unknown
wasm-bindgen target/wasm32-unknown-unknown/release/vize_vitrine.wasm --out-dir npm/vize-wasm --target webvize [COMMAND] [OPTIONS]| Command | Description |
|---|---|
build |
Compile Vue SFC files (default) |
fmt |
Format Vue SFC files |
lint |
Lint Vue SFC files |
check |
Type check Vue SFC files |
musea |
Start component gallery server |
lsp |
Start Language Server Protocol server |
vize --help # Show help
vize <command> --help # Show command-specific helpExamples:
vize # Compile ./**/*.vue to ./dist
vize build src/**/*.vue -o out # Custom input/output
vize build --ssr # SSR mode
vize build --script_ext=preserve # Keep .ts/.tsx/.jsx extensions
vize fmt --check # Check formatting
vize lint --fix # Auto-fix lint issues
vize check --strict # Strict type checkingimport init, { compileSfc } from '@vizejs/wasm';
await init();
const { code } = compileSfc(
`<template><div>{{ msg }}</div></template>`,
{ filename: 'App.vue' }
);// vite.config.js
import { defineConfig } from 'vite';
import vize from '@vizejs/vite-plugin';
export default defineConfig({
plugins: [vize()],
});Compiling 15,000 SFC files (36.9 MB):
| @vue/compiler-sfc | Vize | Speedup | |
|---|---|---|---|
| Single Thread | 16.21s | 6.65s | 2.4x |
| Multi Thread | 4.13s | 498ms | 8.3x |
Vize supports multi-language messages for lint diagnostics and compiler errors.
| Code | Language |
|---|---|
en |
English (default) |
ja |
Japanese (日本語) |
zh |
Chinese (中文) |
CLI:
vize lint --locale jaWASM:
import { lintSfc } from '@vizejs/wasm';
const result = lintSfc(source, {
filename: 'App.vue',
locale: 'ja',
});Rust API:
use vize_patina::{Linter, Locale};
let linter = Linter::new().with_locale(Locale::Ja);
let result = linter.lint_template(source, "test.vue");The Playground includes a locale selector to switch languages for lint messages.
This project is inspired by and builds upon the work of these amazing projects. We are deeply grateful for their pioneering work and open-source contributions.
- Volar.js - The embedded language tooling framework
- vuejs/language-tools - Official Vue.js language tools
- eslint-plugin-vue - Official ESLint plugin for Vue.js
- eslint-plugin-vuejs-accessibility - Accessibility rules for Vue.js
- Lightning CSS - Extremely fast CSS parser, bundler, transformer
- Storybook - UI component explorer
- OXC - The JavaScript Oxidation Compiler
MIT
