@aevantec/litevue

litevue

litevue is a fork of petite-vue by Evan You — an alternative distribution of Vue optimized for progressive enhancement: sprinkling interactivity onto server-rendered HTML with the same template syntax and reactivity mental model as standard Vue.

Published on npm as @aevantec/litevue — the unscoped name is blocked by an unrelated lite-vue package. The IIFE/UMD global stays LiteVue.

• ~10kb gzipped core, driven by the real @vue/reactivity
• Vue-compatible syntax: {{ }}, v-if/v-for (keyed), v-model, v-show, …
• Built-in devtools — in-page inspector panel + browser extension, one line to disable in production
• Transitions that work with v-show and v-if (deferred unmount)
• Plugin system with eleven first-party plugins: intersect, persist, focus (+trap), collapse, transition, mask, morph, media, resize, popover (+anchor), and navigate
• Lazy mounting — v-scope.visible, .idle and .interaction leave a region unbound until it is seen, the browser is idle, or it is first used
• Components registered by name with app.component(), usable from v-scope
• Global store (store() / $store) and magic properties ($dispatch, $watch, $id, $root, …)
• Cached derived state with computed(), alongside reactive() and watchEffect()
• Extra event modifiers: .outside, .window, .debounce, .throttle, animation-event filters
• Error diagnostics that name the directive, element and expression — and suggest the name you meant — plus app.onError() for monitoring in production
• Development builds with warnings for common mistakes, picked automatically by Vite and webpack while you develop
• Safe with dynamic content: injected markup stays inert until explicitly mounted, and morph updates a server-rendered region in place without losing scope state, focus or scroll

Quick start

<script src="https://unpkg.com/@aevantec/litevue" defer init></script>

<div v-scope="{ count: 0 }">
  {{ count }}
  <button @click="count++">inc</button>
</div>

Or with a bundler:

npm install @aevantec/litevue

import { createApp } from '@aevantec/litevue';

createApp({ count: 0 }).mount();

Documentation

Full documentation lives in the docs site (source in docs/, pnpm docs:dev to run locally):

• Introduction — what it is, Vue compatibility, limitations, security and CSP
• Installation — CDN, npm, mount options, and development builds
• Essentials — state, templating, components, lifecycle, dynamic content, server-driven HTML, resources, forms, error handling
• Directives — a page per directive, with live demos
• Magics — $el, $store, $dispatch, $watch, $id, …
• Globals — createApp(), store(), reactive(), computed(), watchEffect(), nextTick(), the devtools API
• Plugins — all first-party plugins, and writing your own
• Devtools — inspector panel, browser extension, production kill-switch
• Migrating from petite-vue · Coming from Alpine

Development

pnpm install
pnpm dev        # test pages at localhost:3000
pnpm test       # vitest suite
pnpm build      # core, devtools and plugin bundles, production and development
pnpm docs:dev   # documentation site

See CHANGELOG.md for the fork's history.

Status

litevue continues from petite-vue 0.4.1, which is no longer actively maintained upstream. It aims to stay aligned with standard Vue behavior so code can graduate to Vue with minimal friction.

License

MIT. Original petite-vue by Evan You; fork additions by the litevue contributors.