# Petite-vue — 6KB Progressive Enhancement Subset of Vue

> A lightweight 6KB subset of Vue.js optimized for sprinkling interactivity onto server-rendered HTML.

## Install

Save in your project root:

# Petite-vue — 6KB Progressive Enhancement Subset of Vue

## Quick Use
```html
<script src="https://unpkg.com/petite-vue" defer init></script>
<div v-scope="{ count: 0 }">
  <button @click="count++">{{ count }}</button>
</div>
```
No build step required. Add the script tag and use Vue-like directives directly in your HTML.

## Introduction
Petite-vue is an alternative distribution of Vue.js created by Evan You, optimized for progressive enhancement of existing HTML pages. At only 6KB gzipped, it provides Vue-style reactivity and directives without a virtual DOM or build step, making it ideal for adding interactivity to server-rendered pages.

## What Petite-vue Does
- Adds reactive data binding to existing HTML with Vue-like template syntax
- Supports v-if, v-for, v-bind, v-on, v-model, and v-scope directives
- Initializes directly from script tags with no compilation or bundling needed
- Uses a DOM-walking approach instead of virtual DOM for minimal overhead
- Provides component-like reuse through the createApp and v-scope patterns

## Architecture Overview
Unlike full Vue which uses a virtual DOM and compiler, petite-vue walks the actual DOM and sets up reactive bindings in place. It uses Vue 3's reactivity system (@vue/reactivity) under the hood for change tracking. Each v-scope creates a reactive scope that automatically updates the DOM when data changes, without diffing or patching.

## Self-Hosting & Configuration
- Load via CDN script tag with defer and init attributes for zero-config setup
- Alternatively install via npm for use with bundlers
- Use createApp() for programmatic initialization with root data
- Register global directives and components via the app instance
- No build tools, CLI, or dev server required

## Key Features
- Only 6KB gzipped with Vue-compatible template syntax
- No virtual DOM overhead; binds directly to existing DOM elements
- Works with server-rendered HTML from any backend (Rails, Django, PHP, etc.)
- Supports Vue 3 reactivity primitives (reactive, computed, effect)
- Component reuse via v-scope and template functions

## Comparison with Similar Tools
- **Alpine.js** — Similar philosophy but different syntax; petite-vue uses Vue's familiar directives
- **Vue.js** — Full framework with virtual DOM and SFC support; petite-vue is for light enhancement
- **htmx** — Server-driven approach using HTML attributes; petite-vue is client-side reactive
- **Stimulus** — Convention-based controllers; petite-vue offers more flexible data binding

## FAQ
**Q: When should I use petite-vue vs full Vue?**
A: Use petite-vue for sprinkling interactivity on server-rendered pages. Use full Vue for SPAs.

**Q: Can I use Vue components with petite-vue?**
A: No, it does not support SFCs or the Vue component system. Use v-scope for reuse.

**Q: Does it support Vue devtools?**
A: No, the devtools extension is not supported.

**Q: Is petite-vue production-ready?**
A: Yes, it is published by the Vue core team and used in production.

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

---
Source: https://tokrepo.com/en/workflows/asset-87c98544
Author: AI Open Source