Petite Vue — Lightweight Progressive Enhancement with Vue Reactivity

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