Petite-vue — 6KB Progressive Enhancement Subset of Vue

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