Vize

Unofficial High-Performance Vue.js Toolchain in Rust

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

Playground

Warning

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

---

Crates

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_atelier_ssr	SSR (Server-Side Rendering) 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)

npm Packages

Package	Description
vizejs	Main package with CLI
@vizejs/native	Node.js native bindings (NAPI)
@vizejs/wasm	WASM bindings for browsers
@vizejs/vite-plugin	Vite plugin for Vue SFC compilation
@vizejs/vite-plugin-musea	Vite plugin for Musea component gallery
@vizejs/musea-mcp-server	MCP server for AI integration

IDE / Editor Support

Editor	Extension
VS Code	Vize - Vue Language Support powered by Vize LSP
VS Code	Vize Art - Syntax highlighting for *.art.vue files

Naming Theme

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

Architecture

Installation

CLI

# via npm (recommended)
npm install -g vizejs

# via Cargo
cargo install vize

npm

# Main package (includes CLI)
npm install vizejs

# Native bindings (Node.js)
npm install @vizejs/native

# WASM bindings (Browser)
npm install @vizejs/wasm

# Vite plugin
npm install @vizejs/vite-plugin

# Musea (component gallery)
npm install @vizejs/vite-plugin-musea

Quick Start (Development)

With mise (Recommended)

mise install && mise setup
mise cli      # Enable `vize` CLI command
mise dev      # Playground

Without mise

Manual Setup

Prerequisites:

• Rust (1.80+)
• Node.js (20+)
• pnpm (9+)

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 dev

Building Native Bindings (for @vizejs/native):

cd npm/vize-native
pnpm build

Building 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 web

Usage

CLI

vize [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 help

Examples:

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 checking

WASM (Browser)

import init, { compileSfc } from '@vizejs/wasm';

await init();
const { code } = compileSfc(
  `<template><div>{{ msg }}</div></template>`,
  { filename: 'App.vue' }
);

Vite Plugin

// vite.config.js
import { defineConfig } from 'vite';
import vize from '@vizejs/vite-plugin';

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

Performance

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

AI Integration (MCP)

Vize provides Model Context Protocol (MCP) server for AI-powered development workflows.

npm install @vizejs/musea-mcp-server

The MCP server exposes component information from Musea gallery, enabling AI assistants to understand and work with your Vue components.

Internationalization (i18n)

Vize supports multi-language messages for lint diagnostics and compiler errors.

Supported Locales

Code	Language
en	English (default)
ja	Japanese (日本語)
zh	Chinese (中文)

Usage

CLI:

vize lint --locale ja

WASM:

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");

Playground

The Playground includes a locale selector to switch languages for lint messages.

Credits

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

License

MIT