Petite-Vue: Minimal Vue Subset for Progressive Enhancement

0.4.1 · maintenance · verified Sun Apr 19

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.

Common errors

```
ReferenceError: PetiteVue is not defined
```
cause Attempting to use `PetiteVue.createApp()` when the global IIFE build of petite-vue has not been loaded, or the script loading failed.

fix Ensure that the `petite-vue.iife.js` build is loaded via a `<script>` tag before any code attempts to access the `PetiteVue` global, or consider using the ES module build with `import { createApp } from '...'` instead.
```
Uncaught TypeError: createApp is not a function
```
cause This typically occurs when trying to `import { createApp } from 'petite-vue'` in a non-ESM environment or when the global IIFE build is loaded, which exposes `PetiteVue` but not `createApp` as a named export.

fix If using a `<script type="module">` tag, ensure you are importing from the `petite-vue.es.js` build. If not using modules, access it via the global `PetiteVue.createApp()` after loading the `petite-vue.iife.js` build.
```
Reactivity is not working or data is not updating in the DOM.
```
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).

fix Verify that elements intended to be reactive have a `v-scope` attribute. If using auto-init, ensure `<script src="..." defer init></script>`. If using manual init, make sure `createApp().mount()` is called after petite-vue is loaded, potentially with a specific mount target.

Warnings

breaking petite-vue is relatively new and its API might still undergo changes. Users should be aware that future versions could introduce breaking changes.
Fix: Review the official GitHub repository for release notes and update guides before upgrading to new minor or major versions.
gotcha 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.
Fix: Utilize the discussions tab on GitHub for community support or prepare to contribute fixes directly.
gotcha 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.
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).

Install

npm install petite-vue npm
yarn add petite-vue yarn
pnpm add petite-vue pnpm

Imports

createApp
wrong:
```
const { createApp } = require('petite-vue')
```
correct:
```
import { createApp } from 'petite-vue'
```
Primarily for ESM environments or when using the ES module build from a CDN. Not a default export.
PetiteVue
wrong:
```
import PetiteVue from 'petite-vue'
```
correct:
```
PetiteVue.createApp().mount()
```
This global object is available when loading the IIFE build (e.g., from unpkg.com/petite-vue.iife.js) directly in a script tag.
v-scope
```
<div v-scope="{ message: 'hello' }">
```
`v-scope` is a special attribute recognized by petite-vue to delineate reactive regions. It's not a JavaScript import but a core directive.

Quickstart

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`.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Petite-Vue Counter</title>
  <script src="https://unpkg.com/petite-vue" defer init></script>
</head>
<body>
  <h1>Petite-Vue Example</h1>

  <div v-scope="{ count: 0, message: 'Hello Petite-Vue!' }">
    <p>Count: {{ count }}</p>
    <p>Message: {{ message }}</p>
    <button @click="count++">Increment Count</button>
    <button @click="message = 'Updated!'">Change Message</button>
  </div>

  <div v-scope="{ items: ['apple', 'banana', 'cherry'] }">
    <h2>Grocery List</h2>
    <ul>
      <li v-for="item in items">{{ item }}</li>
    </ul>
    <button @click="items.push('date')">Add Item</button>
  </div>
</body>
</html>

view raw JSON →