{"id":11545,"library":"petite-vue","title":"Petite-Vue: Minimal Vue Subset for Progressive Enhancement","description":"petite-vue is a lightweight (approx. 6kb) distribution of Vue.js designed specifically for progressively enhancing existing HTML pages with reactivity, rather than building single-page applications. It provides the core Vue template syntax and reactivity model but is optimized for \"sprinkling\" interactions without a build step. The current version is `0.4.1`, and its development status, as per the README, indicates that while usable, it is still relatively new with potential for API changes. The project maintains a very focused, minimal scope, with issue tracking and feature requests explicitly disabled to prioritize core functionality. Its key differentiators include its minuscule size, server-side rendering friendliness, direct DOM manipulation, and the ability to integrate interactivity into static pages using a familiar Vue-like syntax, often without requiring a full build pipeline.","status":"maintenance","version":"0.4.1","language":"javascript","source_language":"en","source_url":"https://github.com/vuejs/petite-vue","tags":["javascript","vue","typescript"],"install":[{"cmd":"npm install petite-vue","lang":"bash","label":"npm"},{"cmd":"yarn add petite-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add petite-vue","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Primarily for ESM environments or when using the ES module build from a CDN. Not a default export.","wrong":"const { createApp } = require('petite-vue')","symbol":"createApp","correct":"import { createApp } from 'petite-vue'"},{"note":"This global object is available when loading the IIFE build (e.g., from unpkg.com/petite-vue.iife.js) directly in a script tag.","wrong":"import PetiteVue from 'petite-vue'","symbol":"PetiteVue","correct":"PetiteVue.createApp().mount()"},{"note":"`v-scope` is a special attribute recognized by petite-vue to delineate reactive regions. It's not a JavaScript import but a core directive.","symbol":"v-scope","correct":"
"}],"quickstart":{"code":"\n\n\n \n \n Petite-Vue Counter\n \n\n\n

Petite-Vue Example

\n\n
\n

Count: {{ count }}

\n

Message: {{ message }}

\n \n \n
\n\n
\n

Grocery List

\n \n \n
\n\n","lang":"typescript","description":"This HTML snippet demonstrates how to use petite-vue directly in the browser with CDN. It shows automatic initialization, basic reactivity with `v-scope` for data binding, click handlers, and list rendering using `v-for`."},"warnings":[{"fix":"Review the official GitHub repository for release notes and update guides before upgrading to new minor or major versions.","message":"petite-vue is relatively new and its API might still undergo changes. Users should be aware that future versions could introduce breaking changes.","severity":"breaking","affected_versions":">=0.1.0"},{"fix":"Utilize the discussions tab on GitHub for community support or prepare to contribute fixes directly.","message":"The project's issue list is intentionally disabled, and feature requests are unlikely to be accepted. Users encountering bugs may need to provide their own workarounds or submit pull requests for fixes.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Update CDN script tags in production environments to include the specific version number and full path to the desired build file (IIFE or ES module).","message":"For production usage, it's recommended to use a fully resolved CDN URL (e.g., `petite-vue@0.4.1/dist/petite-vue.iife.js`) instead of the short URL (`unpkg.com/petite-vue`) to avoid resolution and redirect costs.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure that the `petite-vue.iife.js` build is loaded via a ``. If using manual init, make sure `createApp().mount()` is called after petite-vue is loaded, potentially with a specific mount target.","cause":"This often happens if the `v-scope` attribute is missing or incorrectly placed, if the `init` attribute is missing on the script tag (for auto-init), or if `createApp().mount()` is not called (for manual init).","error":"Reactivity is not working or data is not updating in the DOM."}],"ecosystem":"npm"}