# 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
alpine	14	4	0.2.1	8 years ago	8 years ago
petite-vue	7,548	16	0.4.1	a year ago	2 years ago
solid-js	26,589	32	1.6.15	4 days ago	5 years ago
stimulus			3.2.1	4 months ago	6 years ago

alpine vs petite-vue vs solid-js vs stimulus

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past