![\"ivue](\"docs_v2/public/brand-lockup-dark.png\")
\n \n \n \n
\n ![\"npm](\"https://img.shields.io/npm/v/ivue.svg\")
\n ![\"npm](\"https://img.shields.io/npm/dm/ivue.svg\")
\n ![\"build](\"https://github.com/infinite-system/ivue/actions/workflows/ci.yml/badge.svg?branch=main\"){kind=icon}
\n ![\"100%](\"https://img.shields.io/badge/coverage-100%25-34d399\"){kind=icon}
![\"1.1](\"https://img.shields.io/badge/gzipped-1.1%20kB-818cf8\"){kind=icon}
![\"MIT](\"https://img.shields.io/badge/license-MIT-blue.svg\"){kind=icon}
\n
\n Docs ·\n Getting Started ·\n The Standard ·\n Examples ·\n Benchmarks ·\n Blog ·\n Community\n
\n\n---\n\nivue builds Vue 3 reactivity out of plain TypeScript classes. Real\ninheritance, real encapsulation, real polymorphism — on ordinary objects,\nwith nothing paid until first access. The whole engine is **1.1 kB gzipped**\nwith zero dependencies.\n\n```sh\nnpm i ivue vue\n```\n\n```ts\nimport { Reactive } from 'ivue';\nimport { ref } from 'vue';\n\nclass $Counter {\n get count() {\n return ref(0)\n }\n get double() {\n return this.count.value * 2 // plain getter — derives on read\n }\n increment() {\n this.count.value++\n }\n}\n\nexport namespace Counter {\n export const $Class = $Counter; // raw — children `extends` this\n export let Class = Reactive($Class); // reactive — you `new` this\n export type Instance = typeof Class.Instance; // the unwrapping-surface type\n}\n```\n\n```vue\n\n\n\n \n\n```\n\nFull walkthrough: [Getting Started](https://ivue.dev/guide/getting-started).\n\n## Built for humans and AI\n\nivue ships with a\n[Standard Operating Manual](https://ivue.dev/guide/standard) — the complete\nauthoring standard as annotated templates, rules, and a review checklist. It\nreads as documentation and works as a drop-in skill for AI coding agents, so\ngenerated code follows the same standard your team writes:\n\n```sh\nnpx ivue skill # installs .claude/skills/ivue/SKILL.md, version-locked\nnpx ivue skill --all # + Codex/Cursor/Copilot where already in use\n```\n\nAgents holding the Standard have\n[derived correct patterns its own author never wrote](https://ivue.dev/blog/patterns-the-author-never-wrote) —\nthe manual is a generator, not a catalog. The wider argument:\n[Reactive framework for the AI era](https://ivue.dev/blog/reactive-framework-for-the-ai-era).\n\n## Why classes, why now\n\n- **Native class API** — `extends`, `super`, getters, setters, private\n fields. Real inheritance, encapsulation and polymorphism, all reactive.\n- **Zero-cost creation** — instances are plain objects. A million of them\n take 22 ms — 6 to 132× faster than the alternatives.\n- **One kilobyte** — 1.1 kB gzipped, zero dependencies, 100% test coverage.\n Stripped to the load-bearing core — an API you can hold in your head.\n- **Store or ViewModel** — the same class serves as a global store, a\n component ViewModel, or a domain model. One mental model everywhere.\n- **Composition API, fully compatible** — composables plug in through\n `$`-getters. The entire Vue ecosystem works inside your classes.\n- **TypeScript first** — writable ref-getters, fully typed instances,\n precise inference. The type system shaped the engine's design.\n\n## One idea, carried through\n\n`Reactive()` transforms a class **once**. A getter returning `ref()` becomes\nstate: created on first touch, cached, stable forever. A plain getter stays\nplain and re-derives on every read — reactive with zero allocation. Methods\nbind themselves once, to the right `this`. Instances stay ordinary objects:\nno proxy wraps them, no work happens at construction.\n\nInheritance, teardown, development parity, speed — consequences of that one\nmove. And composables plug straight in:\n\n```ts\nimport { useMouse } from '@vueuse/core';\n\nclass $Pointer {\n private get $mouse() {\n return useMouse() // created once, encapsulated\n }\n get x() {\n return this.$mouse.x\n }\n get y() {\n return this.$mouse.y\n }\n}\n```\n\n## Hard problems, solved together\n\nEach of these sank earlier class-reactivity attempts. ivue ships all of them\nas one coherent design:\n\n- **Bound methods** — `this.method` is always correct, always the same reference.\n- **Reactive inheritance** — deep `super.x.value` chains resolve level-safe.\n- **Development parity** — the same class identity, direct binding, and engine branches in development and production.\n- **[Circular import immunity](https://ivue.dev/blog/circular-imports-dissolved)** — the namespace pattern resolves mutual references in any load order.\n- **Writable getter types** — ref-returning getters type as writable; instances fully inferred.\n- **Deterministic teardown** — `$watch` scopes per instance, `$stopEffects()` cleans up.\n- **Minimal memory footprint** — derivations are shared prototype getters, not per-instance allocations.\n- **Hot paths** — reads hoist to native ref speed with one line where it matters.\n\n## `Static()` — capability classes (`ivue/extras`, +0.5 kB)\n\nThe same discipline for the class-level surface:\n[`Static()`](https://ivue.dev/guide/static) makes static methods lazy-bound\nand `$`-prefixed static getters cached **per receiver** — a lazy singleton,\nan inheritance-aware store, an override seam, and a test boundary in one\ndeclaration. It retires\n[module-level state](https://ivue.dev/blog/module-level-state) outright, and\nit has no Vue dependency — the identical idiom runs under Node and Bun:\n\n```ts\nimport { Static } from 'ivue/extras';\n\nclass $TextSegmentation {\n protected static get $segmenter() {\n return new Intl.Segmenter(undefined, { granularity: 'grapheme' });\n }\n}\n\nexport namespace TextSegmentation {\n export const $Class = Static($TextSegmentation); // anchor — children extend this\n export let Class = $Class;\n}\n```\n\n## Proven at scale\n\n\n \n ![\"Invar](\"docs_v2/public/invar-editor.svg\")
\n \n