petite-vue is a lightweight Vue alternative that can be “sprinkled” over your project requiring no extra bundling steps or build processes. Let’s learn how to use it and compare it to standart Vue!
petite-vue is an alternative distribution of Vue specifically built with progressive enhancement in mind. At only 5.8Kb, it is an extremely lightweight alternative to standard Vue that can be sprinkled throughout your project using Vue-compatible template syntax. petite-vue is similar to Vue in many ways. The main difference is that petite-vue does not require a build step, and thus does not need a compiler, decreasing the overall size.
In this article I will not only explain what petite-vue does and how it works, but will also cover how to get started with a few use cases and finally compare it to standard Vue.
The benefit of petite-vue is not just its small bundle size, but also its ability to simplify progressive enhancement. To understand petite-vue, we first must understand what progressive enhancement is.
Progressive enhancement is a strategy in web development that prioritizes showing important content before worrying about the way in which this content is displayed. Using this method, content presentation is implemented in one or more optional layers, and is activated based on aspects of the browser or internet connection of the user. This allows everyone to access the most important content and functionality of the web app, while users with faster internet or additional browser features can receive the more enhanced version. For example, if a user with a slow network visits a site that relies on a script to display initial content, they will be stuck with a blank screen until the script loads. Following the principles of progressevie enhancement, the core content in this case should be loaded in the HTML rather than relying on scripts which may never load.
While standard Vue can be used with or without a build step, the optimal usage involves a build setup making it better suited when building SPAs or apps with heavy interactions. Using standard Vue without a build step actively opts you out of: the Vue CLI, single file components, and smaller/more optimized bundles. So while a buildless implementation of standard Vue is possible, it provides a less optimal developer experience. petite-vue, on the other hand, requires no extra bundling steps or build processes. Since petite-vue was built to sprinkle interactions throughout a project rather than using heavy interactions, the CLI and SFCs are not necessary. To get started with petite-vue you simply load it from a CDN:
<script src="https://unpkg.com/petite-vue" defer init></script>Unlike Vue and most other frontend frameworks, petite-vue does not use the virtual DOM, but rather it mutates the DOM in place. Standard Vue pre-compiles all the templates, eliminating the need for template processing at runtime. As mentioned earlier, standard Vue can be used without a build step, but it is not optimal as it creates a large overhead. By navigating the existing DOM and mutating it directly, petite-vue avoids all this overhead. In other words, the DOM is the template, making petite-vue much more efficient in progressive enhancement scenarios.
It is extremely simple for Vue developers to move between petite-vue and standard Vue due to the compatible template syntax. petite-vue uses most of the familiar syntax of Vue. Not only does this familiar syntax make petite-vue easy to learn, but also easy to transition between the two
So now let’s go over how to use petite-vue in a project! First, we have to add it to our project. We can do this by loading it from a CDN:
<script src="https://unpkg.com/petite-vue" defer init></script>In the above line of code, the defer attribute makes the script execute after HTML content is parsed, while the init attribute tells petite-vue to automatically query and initialize all elements that are using petite-vue on the page. How do we communicate which elements are using petite-vue? Great question! We simply add v-scope to the element. Let’s look at an example.
<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>Here we added v-scope to identify a region on the page that will be controlled by petite-vue. The v-scope directive is also used to pass in states that a particular element will have access to. In the above example, we pass in count, and can use the familiar Vue syntax to add one to count every time the button is clicked.
Alternatively, if you don’t want to auto init, remove the init attribute and move the scripts to the end of <body>, we can use the ES module build. ES modules are javascript files using import and export statements that are loaded using scripts with type=”module”. In contrast to classic scripts, variables declared inside modules are scoped to the file itself. Using this method, we will import the createApp function from petite-vue, which accepts a data object that serves as the root scope for all expressions. To create the same counter button as before using this method, the code would look like this:
<script type="module">
import { createApp } from 'https://unpkg.com/petite-vue?module'
createApp({
{ count }
count: 0,
this.count++
}
}).mount()
</script>
<!-- v-scope value can be omitted -->
<div v-scope="{ count: 0 }">
{ count }
</div>
<button @click="increment">inc</button>
</div>Notice that v-scope does not need to have a value here, and simply directs petite-vue to process the element.
We’ve already touched on v-scope, but there is another petite-vue exclusive feature worth mentioning, v-effect. This directive is used to execute inline reactive statements.
<div v-scope="{ count: 0 }">
<div v-effect="$el.textContent = count"></div>
<button @click="count++">++</button>
</div>In the above example, the effect uses count which is a reactive data source, so it will re-run whenever count changes.
Now we are familiar with how petite-vue works, as well as it’s new features unfamiliar to standard Vue. While petite-vue supports many familiar features of Vue, due to its small scope, not all are supported. Let’s take a look at the Vue features that remain, as well as those that have been dropped.
{{}}: text bindingsv-bind and :: class and style special handlingv-on and @: event handlingv-model: represents all inputs types and non-string :value bindingsv-if / v-else / v-else-ifv-forv-showv-hmtlv-prev-oncev-cloakreactive()nextTick()ref() and computed()Map, Set, etc.Transition, keep-alive, <teleport>, and <suspense> componentsv-for: deep destructurev-on="object"v-is and <component :is="newComponent>v-bind:style auto-prefixingOverall, I enjoyed using petite-vue, and found it extremely simple to pick up due to its familiar Vue syntax. While it is not a replacement for Vue, it is a great option for adding small interactivity/reactivity to existing projects or projects that should be kept simple in scope. I had no issue using petite-vue to make my vision come to life, and was able to do so in a couple of hours, making me confident that this is something I’ll be using more in the future. One use case that I’m interested in testing next is using petite-vue to create prototypes, making the prototype more similar to the target framework of the final product, thus making it simple to upgrade to standard Vue when needed.
Overall, petite-vue is great for adding minimal interactions throughout a project that you want to keep somewhat simple in scope. It provides a great method of enhancing your otherwise normal HTML with little effort and few lines of code. petite-vue has great potential for simple projects that only require minimal interactions such as prototyping, adding Vue functionality to existing projects, or building static landing pages. With its Vue compatible syntax, it will be extremely comfortable for Vue developers to learn and use. petite-vue has a lot of potential, but it is still new. While it is already a functional and useful tool, its docs include a disclaimer warning that it will most likely be buggy and may still have some API changes. The next time I come across a project that would benefit from petite-vue, I’ll definitely be using it again, but use at your own risk!