Petite-vue is a lightweight alternative distribution of Vue designed specifically for progressive enhancement scenarios. At approximately 6 kilobytes, it provides Vue-compatible template syntax and reactivity while being optimized for adding small amounts of interactivity to existing server-rendered HTML pages. Rather than replacing DOM content like standard Vue does, petite-vue walks the existing DOM and attaches fine-grained reactive effects directly to elements, making the DOM itself function as the template.
The library is built on top of Vue's reactivity system from @vue/reactivity and can be used without any build step by loading it directly from a CDN. It introduces the v-scope directive to mark regions of a page that should be controlled by petite-vue, and supports automatic initialization through an init attribute. Multiple petite-vue instances can coexist on the same page, each controlling different regions independently. The library accepts a data object as root scope through the createApp function, which serves as the foundation for all reactive expressions within its scope.
Petite-vue supports many Vue-compatible features including template interpolation with configurable delimiters, v-bind with shorthand syntax, v-on with all modifiers, v-model for all input types, conditional rendering with v-if and v-else, list rendering with v-for, and visibility control with v-show. It also provides reactive() for global state management and nextTick() for scheduling callbacks. The library introduces petite-vue-specific features like v-effect for executing reactive inline statements and lifecycle events through vue:mounted and vue:unmounted.
The project intentionally maintains a minimal scope and differs from standard Vue in several ways. It uses a DOM-based approach that mutates elements in place rather than using a virtual DOM, making it unsuitable for render functions or platform-agnostic rendering. Components in petite-vue are simplified into object-returning functions rather than full component objects. Custom directives follow a different interface than standard Vue. The $el reference in expressions points to the current element rather than a component root.
According to GitGenius activity data, petite-vue is classified across multiple categories including Reactive UI, Progressive Enhancement, Lightweight, JavaScript Library, Web Development, Declarative, HTML Directives, Embedded UI, Minimal Footprint, and Frontend Tool. The repository explicitly disables its issue list, with the maintainer noting higher priority focuses and requesting that bug fixes come through pull requests rather than issue reports. Feature requests are unlikely to be accepted as the project scope is intentionally kept minimal. The discussions tab is available for community support.
Petite-vue deliberately omits several Vue features to maintain its small footprint, including ref() and computed() functions, render functions, reactivity for collection types like Map and Set, and advanced features like Transition, KeepAlive, Teleport, and Suspense. When compared to Alpine, petite-vue is approximately half the size and aims to maintain closer alignment with standard Vue behavior to reduce friction if users eventually migrate to full Vue. The library evaluates JavaScript expressions using new Function(), which means it cannot support strict Content Security Policy settings without shipping an expression parser that would defeat its lightweight purpose.
