petite-vue

library0.4.1jsnpmunverified

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.

web-framework

npm install petite-vue

github ↗package ↗

INSTALL

IMPORT

SIG · PETITE-VUE

petite-vue

web-frameworkjavascriptv0.4.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

createApp

✓ import { createApp } from 'petite-vue'

✗ const { createApp } = require('petite-vue')

Primarily for ESM environments or when using the ES module build from a CDN. Not a default export.

PetiteVue

✓ PetiteVue.createApp().mount()

✗ import PetiteVue from 'petite-vue'

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.

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>

Debug

Known issues

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

affects: >=0.1.0

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

affects: >=0.1.0

gotchaFor 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).

affects: >=0.1.0

Errors

Common errors & fixes

ReferenceError: PetiteVue is not defined

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

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.

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.

Upgrade

Version history

0.4.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/vuejs/petite-vue ↗

packagehttps://www.npmjs.com/package/petite-vue ↗