According to Evan You, the creator of Vue, petite-vue is an alternative distribution of Vue inspired by Alpine.js that is optimized for progressive enhancement.
petite-vue is perfect for those who are familiar with Vue and want to add Vue to a project that renders on the server side.
In this article, we’ll look at what petite-vue does, how it works, and how it compares to both standard Vue and Alpine.js. We’ll also cover how to get started with petite-vue and look at a few use cases. Let’s get started!
Progressive enhancement is a methodology that allows a web developer to begin programming with HTML and include other technologies as needed. You can begin building a website statically with just HTML, then add interactivity or client states to pages.
petite-vue is optimized for small interactions on existing HTML pages that are rendered by a server framework, therefore simplifying progressive enhancement. Let’s see how it works!
Let’s understand how petite-vue works by looking at its fundamental features.
You can simply include petite-vue in a script tag to get its features in an HTML page:
<script src=”https://unpkg.com/petite-vue” defer init></script>
<!– anywhere on the page –>
<div v-scope=”{ count: 0 }”>
{{ count }}
<button @click=”count++”>inc</button>
</div>
The latest versions of Vue and Alpine have respective bundle sizes of 22.9kB and 9.9kB minified and gzipped. petite-vue, on the other hand, has a bundle size of 6.4kB and was intended to be lightweight.
A developer already familiar with the Vue template syntax will find it easy to move between petite-vue and Vue.
As a subset of Vue itself, petite-vue uses most of the familiar syntax of Vue. For example, petite-vue uses template interpolation like {{ count }} and template event listeners like @click.
Unlike Vue, React, and most other frontend libraries and frameworks, petite-vue does not use the virtual DOM. Instead, it mutates the DOM in place.
The @vue/reactivity package is responsible for both Vue and Alpine reactivity. petite-vue uses this same reactivity technique.
petite-vue is similar to Vue in many ways. As mentioned, it provides the same template syntax and @vue/reactivity model provided by standard Vue. However, the most significant difference is that petite-vue was made for progressive enhancement.
Standard Vue was designed for using a build step to build single-page applications (SPAs) with heavy interactions. It uses render functions to replace existing DOM templates. Petite-vue, on the other hand, walks the existing DOM and mutates it in place, so it doesn’t require a build step.
petite-vue introduces some new features not available in standard Vue that aid in optimizing progressive enhancement. Let’s take a look at them!
In petite-vue, the v-scope is a directive that marks the region of the page controlled by petite-vue. You can also use the v-scope directive to pass in states that a particular region of your page will have access to.
v-effect is a directive used to execute inline reactive statements in petite-vue. In the code snippet below, the count variable is reactive, so the v-effect will rerun whenever the count changes, then update the div with the current value of count:
<div v-scope=”{ count: 0 }”>
<div v-effect=”$el.textContent = count”></div>
<button @click=”count++”>++</button>
</div>
petite-vue ships with two lifecycle events, @mounted and @unmounted, which allow you to listen for when petite-vue mounts or unmounts on your page.
Now that we’ve seen the new features petite-vue brings to the table, let’s review its features that already exist in Vue:
{{ }}: text bindings
v-bind and : : class and style special handling
v-on and @ : event handling
v-model: represents all inputs types and non-string :value bindings
v-if/ v-else / v-else-if
v-for
v-show
v-hmtl
v-pre
v-once
v-cloak
reactive()
nextTick()
Template refs
Due to its small scope, petite-vue has dropped some of the features found in standard Vue:
ref() and computed()
Render functions: petite-vue has no virtual DOM
Reactivity for collection types: Map, Set, etc.
Transition, keep-alive, <teleport>, and <suspense> components
v-for: deep destructure
v-on=”object”
v-is and <component :is=”newComponent”>
v-bind:style auto-prefixing
Though petite-vue was inspired by Alpine and addresses similar problems, it differs from Alpine due to its minimalism and compatibility with Vue.
petite-vue is about two-thirds of the size of Alpine. Unlike Alpine, it doesn’t ship with a transition system.
Alpine and petite-vue have different designs. Though Alpine resembles Vue’s structure in some ways, petite-vue is more aligned with standard Vue, minimizing the amount of overhead you’ll have if you want to transition between Vue and petite-vue.
To get started with petite-vue, you need to include a script tag that points to the petite-vue package. Let’s create a simple voting app powered by petite-vue.
First, create an index.html file. In the body of it, add the following code snippet:
<script src=”https://unpkg.com/petite-vue” defer init></script>
<div v-scope=”{ upVotes: 0, downVotes: 0 }”>
<p>
{{ upVotes }} <button @click=”upVotes++”>👍</button>
</p>
<p>
{{ downVotes }} <button @click=”downVotes++”>👎</button>
</p>
</div>
The defer attribute on the script tag causes the script loading petite-vue to load after HTML content is parsed by the browser.
The init attribute tells petite-vue to automatically query and initialize all elements that have v-scope.
The v-scope tells petite-vue what region of the page to handle. We also pass in the states upVotes and downVotes to be available to that region.
If you don’t want petite-vue to automatically initialize all elements that have the v-scope attribute, you can manually initialize them by changing the script:
<script src=”https://unpkg.com/petite-vue”></script>
<script>
PetiteVue.createApp().mount()
</script>
Alternatively you can use the ES module build of petite-vue:
<script type=”module”>
import { createApp } from ‘https://unpkg.com/petite-vue?module’
createApp().mount()
</script>
We are accessing petite-vue using a CDN URL. We are using a shorthand URL https://unpkg.com/petite-vue, which is fine for prototyping but not great for production. We want to avoid resolving and redirect costs, so we’ll use the full URLs.
The global build production URL https://unpkg.com/[email protected]/dist/petite-vue.iife.js exposes PetiteVue global and also supports auto init.
The ESM build production URL https://unpkg.com/[email protected]/dist/petite-vue.es.js must be used in a <script type=”module”> block.
We’ve learned a lot about what features petite-vue has and what it can do. Let’s review what type of situations petite-vue is best designed for:
Quick prototyping when you don’t need a build tool
Adding Vue functionality in server-rendered frameworks like Sails, Laravel, or Rails
Building landing pages or marketing pages that can be static with few interactions
Anywhere you would normally use Alpine
petite-vue is a lighter version of Vue that adds efficient interactions to pages. In this article, we took a first look at petite-vue by considering its exclusive features, its similarities to standard Vue, and the feature trade-offs made to retain its light size.
petite-vue is still new and includes a disclaimer for any potential bugs. However, petite-vue is already a functional option with strong potential and usefulness. It is especially helpful for quick prototyping, sprinkling Vue functionality into server-rendered frameworks, and building static pages.
I hope you enjoyed this article! Leave us a comment and let us know if you’re planning to try petite-vue.
The post Introduction to petite-vue: a small, new subset of Vue appeared first on LogRocket Blog.