Native TypeScript classes become fine-grained Vue 3 state. No proxy per instance. No decorators. No component coupling. Nothing paid until first access.
watchwaiting for the first changeReactive() class instance, running the same 1 kB engine that ships. Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.
Antoine de Saint-Exupéry
Each of these sank earlier class-reactivity attempts. Solving one or two is easy. ivue ships all of them as one coherent design.
this.method is always correct, always the same reference. The wrapper-arrow era ends.
Deep super.x.value chains resolve level-safe. Reactivity flows through every layer.
The same class identity, direct method binding, and engine branches run in development and production.
The namespace pattern resolves mutual references in any load order.
Ref-returning getters type as writable. Instances are fully inferred.
Cells exist only when observed; $stopEffects releases or suspends them. Pure data pays nothing.
Derivations are shared prototype getters, not per-instance allocations.
Reads hoist to native ref speed with one line where it matters.
Reactive() transforms a class once — the prototype, not the instances. Ref-getters become state, created on first touch. Plain getters re-derive on every read, reactive with zero allocation. Methods bind once, to the right this. Instances stay ordinary objects: a plain new, no proxy, nothing paid until first access.
Everything else falls out of that one move — inheritance, development parity, deterministic teardown, speed. Not features bolted on; consequences of where things live.
import { Reactive } from 'ivue'
import { ref } from 'vue'
class $Cart {
get items() {
return ref<{ price: number }[]>([])
}
get total() {
return this.items.value.reduce((sum, item) => sum + item.price, 0)
}
add(price: number) {
this.items.value.push({ price })
}
}
export namespace Cart {
export const $Class = $Cart // raw — children `extends` this
export let Class = Reactive($Class) // reactive — you `new` this
export type Instance = typeof Class.Instance // expose & reactive() interop
}
const cart = new Cart.Class()The Standard
Every class on this site is written one way. The Standard Operating Manual defines that way — the full class template, the SFC wiring, every DO and NEVER — one canonical document that reads as a guide and executes as an instruction set.
Read it once, and you can review any ivue code on sight. Install it once, and your AI agent writes canonical ivue from the first prompt.
# install ivue
npm i ivue
# teach your Claude Code
npx ivue skill
# + Cursor, Codex, Gemini…
npx ivue skill --allMeasured, not promised.
ivue vs the World → — ivue against the alternatives, head to head.
Performance by Design → — method and full tables.
Interactive Benchmarks → — five live benchmarks, running in your browser.
Best measured result among fully reactive implementations. Non-reactive controls mark the floor.
Invar — a full terminal IDE built entirely on ivue: 340+ ivue classes — nearly 200 Static() capability classes and about 80 Reactive() models — driving the editor, workspace search, tasks, terminals, and agents — in a Bun process with no DOM. Every frame below is real output from the running app, rendered cell-for-cell from its PTY grid.
Invar is an alpha, experimental project — a proving ground for ivue beyond the web, and an experiment in agentic development: the entire editor was built by AI agents using the ivue skill as their base discipline, with every module governed by explicit invariants contracts. The source is open as a study-scale example of ivue architecture — module seams, namespace exports, flyweight state, and lifecycle discipline, all in one real codebase.
