# petite-vue `petite-vue` is an alternative distribution of [Vue](https://vuejs.org) optimized for [progressive enhancement](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement). It provides the same template syntax and reactivity mental model as standard Vue. However, it is specifically optimized for "sprinkling" a small amount of interactions on an existing HTML page rendered by a server framework. See more details on [how it differs from standard Vue](#comparison-with-standard-vue). - Only ~6kb - Vue-compatible template syntax - DOM-based, mutates in place - Driven by `@vue/reactivity` ## Status - This is pretty new. There are probably bugs and there might still be API changes, so **use at your own risk.** Is it usable though? Very much. Check out the [examples](https://github.com/vuejs/petite-vue/tree/main/examples) to see what it's capable of. - The issue list is intentionally disabled because I have higher priority things to focus on for now and don't want to be distracted. If you found a bug, you'll have to either workaround it or submit a PR to fix it yourself. That said, feel free to use the discussions tab to help each other out. - Feature requests are unlikely to be accepted at this time - the scope of this project is intentionally kept to a bare minimum. ## Usage `petite-vue` can be used without a build step. Simply load it from a CDN: ```html

``` - Use `v-scope` to mark regions on the page that should be controlled by `petite-vue`. - The `defer` attribute makes the script execute after HTML content is parsed. - The `init` attribute tells `petite-vue` to automatically query and initialize all elements that have `v-scope` on the page. ### Manual Init If you don't want the auto init, remove the `init` attribute and move the scripts to end of ``: ```html ``` Or, use the ES module build: ```html ``` ### Production CDN URLs The short CDN URL is meant for prototyping. For production usage, use a fully resolved CDN URL to avoid resolving and redirect cost: - Global build: `https://unpkg.com/petite-vue@0.2.2/dist/petite-vue.iife.js` - exposes `PetiteVue` global, supports auto init - ESM build: `https://unpkg.com/petite-vue@0.2.2/dist/petite-vue.es.js` - Must be used with `

``` Note `v-scope` doesn't need to have a value here and simply serves as a hint for `petite-vue` to process the element. ### Explicit Mount Target You can specify a mount target (selector or element) to limit `petite-vue` to only that region of the page: ```js createApp().mount('#only-this-div') ``` This also means you can have multiple `petite-vue` apps to control different regions on the same page: ```js createApp({ // root scope for app one }).mount('#app1') createApp({ // root scope for app two }).mount('#app2') ``` ### Lifecycle Events You can listen to the special `vue:mounted` and `vue:unmounted` lifecycle events for each element (the `vue:` prefixed is required in 0.4.0+): ```html

``` ### `v-effect` Use `v-effect` to execute **reactive** inline statements: ```html

``` The effect uses `count` which is a reactive data source, so it will re-run whenever `count` changes. Another example of replacing the `todo-focus` directive found in the original Vue TodoMVC example: ```html ``` ### Components The concept of "Components" are different in `petite-vue`, as it is much more bare-bones. First, reusable scope logic can be created with functions: ```html

``` ### Components with Template If you also want to reuse a piece of template, you can provide a special `$template` key on a scope object. The value can be the template string, or an ID selector to a `

	Stars	Issues	Version	Updated	Created
@angular/core	94,699	1,507	17.3.9	2 days ago	8 years ago
alpinejs	27,004	6	3.13.10	23 days ago	4 years ago
lit-element	17,658	496	4.0.5	a month ago	7 years ago
petite-vue	8,808	18	0.4.1	2 years ago	3 years ago
react	222,918	874	18.3.1	21 days ago	13 years ago
svelte	76,778	842	4.2.17	4 days ago	7 years ago

@angular/core vs alpinejs vs lit-element vs petite-vue vs react vs svelte

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past