# Petite Vue — Lightweight Progressive Enhancement with Vue Reactivity

> A 6kB subset of Vue optimized for progressive enhancement of server-rendered HTML, bringing Vue-style reactivity without a full framework build step.

## Install

Save in your project root:

# Petite Vue — Lightweight Progressive Enhancement with Vue Reactivity

## Quick Use
```html
<script src="https://unpkg.com/petite-vue" defer init></script>
<div v-scope="{ count: 0 }">
  <p>{{ count }}</p>
  <button @click="count++">Increment</button>
</div>
```

## Introduction
Petite Vue is an alternative distribution of Vue created by Evan You that weighs only 6kB. It is designed for progressively enhancing existing server-rendered HTML pages rather than building full single-page applications. It uses the same template syntax and reactivity system as Vue 3 but ships without the virtual DOM.

## What Petite Vue Does
- Adds Vue-style reactivity to static HTML without a build step
- Supports v-scope, v-if, v-for, v-on, v-bind, v-model, and other Vue directives
- Provides reactive() and computed helpers from Vue's Composition API
- Mounts on specific DOM regions instead of taking over the entire page
- Works via a single script tag with no tooling required

## Architecture Overview
Petite Vue walks the DOM directly rather than using a virtual DOM. It parses directives (v-scope, v-if, v-for) on real elements and sets up fine-grained reactive bindings using Vue 3's @vue/reactivity package. When reactive state changes, only the affected DOM nodes update. This approach trades SPA-scale rendering for smaller bundle size and faster initialization.

## Self-Hosting & Configuration
- Include via CDN script tag or install from npm as petite-vue
- Add the defer and init attributes to auto-initialize on DOMContentLoaded
- Use v-scope on any element to define a reactive region with local state
- Optionally call createApp() for manual mounting and lifecycle control
- Combine with server-side frameworks like Django, Rails, or Laravel for progressive enhancement

## Key Features
- Only 6kB gzipped with no build step required
- Same template syntax as Vue 3 for familiarity
- Fine-grained DOM updates without a virtual DOM
- v-effect directive for running side effects reactively
- Component-like reuse via function-based templates

## Comparison with Similar Tools
- **Alpine.js** — similar use case but different API; Petite Vue uses Vue syntax directly
- **Vue 3** — full framework with virtual DOM, routing, SSR; Petite Vue is a minimal subset
- **htmx** — extends HTML with AJAX attributes but does not provide client-side reactivity
- **Stimulus** — provides controllers for HTML but lacks reactive data binding
- **Lit** — web-component focused; Petite Vue enhances plain HTML without custom elements

## FAQ
**Q: Can Petite Vue replace Vue 3 for SPAs?**
A: No. It lacks the virtual DOM, router, and full component model needed for large SPAs. It is designed for sprinkling interactivity on server-rendered pages.

**Q: Is the template syntax identical to Vue 3?**
A: Most directives work the same way. The main difference is v-scope replacing the component setup pattern.

**Q: Does it work without a bundler?**
A: Yes. A single script tag is all you need.

**Q: Can I use Vue plugins with Petite Vue?**
A: No. Petite Vue does not support the Vue plugin system or Vue Router.

## Sources
- https://github.com/vuejs/petite-vue
- https://github.com/vuejs/petite-vue#readme

---
Source: https://tokrepo.com/en/workflows/asset-49d331c9
Author: AI Open Source