lightning-vue GitHub ↗

Playgrounds

Three focused tools for trying the compiler, comparing behavior, and inspecting the style rewrite pipeline.

/sfc

SFC Playground

Interactive Vue SFC REPL powered by @lightning-vue/compiler.

 /divergence

Divergence Playground

Reference gallery and live comparison against the Vue compiler path.

 /ir

IR Playground

Trace nested normalization and scoped selector phases end to end.

Install

pnpm 
pnpm add -D @lightning-vue/compiler lightningcss @vitejs/plugin-vue
npm 
npm install -D @lightning-vue/compiler lightningcss @vitejs/plugin-vue

Use it with Vite

Swap in @lightning-vue/compiler as the compiler module for @vitejs/plugin-vue.

import vue from "@vitejs/plugin-vue";
import * as compiler from "@lightning-vue/compiler";

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