petite-vue: An Alpine alternative for progressive enhancement

Editor’s note: This article was last updated 12 August 2022 to reflect changes to petite-vue, including bundle size. 

According to Evan You, the creator of Vue, petite-vue is an alternative distribution of Vue inspired by Alpine that is optimized for progressive enhancement. For developers who are familiar with Vue and want to add Vue to a project that renders on the server side, petite-vue offers the perfect approach.

In this article, we’ll explore what petite-vue does, how it works, and how it compares to both standard Vue and Alpine. We’ll also cover getting started with petite-vue and look at a few of its use cases.

• What is progressive enhancement?
• Fundamental features of petite-vue
  • No build tooling
  • Small bundle size
  • Vue compatible template syntax
  • No virtual DOM
  • Driven by @vue/reactivity
• Vue compatible features
• Features exclusive to Vue
• How petite-vue compares to Alpine
• petite-vue exclusive features
  • v-scope
  • v-effect
  • Lifecycle events
• Getting started with petite-vue
• When to use petite-vue

What is progressive enhancement?

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, thereby simplifying progressive enhancement. Now, let’s see how it works.

Fundamental features of petite-vue

To understand how petite-vue works, we have to consider its fundamental features.

No build tooling

With petite-vue, you don’t have to worry about build tooling. Instead, you can simply include it 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>

Small bundle size

At the time of writing, the latest versions of Vue and Alpine have respective bundle sizes of 34.2kB and 13.5kB minified and gzipped. petite-vue, on the other hand, has a bundle size of only 6.9kB and was intended to be lightweight.

Vue compatible template syntax

A developer who is already familiar with the Vue template syntax will find it easy to transition between Vue and petite-vue. As a subset of Vue itself, petite-vue uses most of the same syntax of Vue. For example, petite-vue uses template interpolation like {{ count }} and template event listeners like @click.

No virtual DOM

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. Therefore, petite-vue runs on a webpage and does not need a compiler, decreasing the overall size.

Driven by @vue/reactivity

The @vue/reactivity package is responsible for handling reactivity in both Vue and Alpine; petite-vue uses this same reactivity technique.

How petite-vue compares to standard Vue

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. Vue uses render functions to replace existing DOM templates, while on the other hand, petite-vue walks the existing DOM and mutates it in place, so it doesn’t require a build step.

petite-vue exclusive features

petite-vue introduces some features that are not available in standard Vue that aid in optimizing progressive enhancement. Let’s take a look at them!

v-scope

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

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>

Lifecycle events

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.

Vue compatible features

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-html
• v-pre
• v-once
• v-cloak
• reactive()
• nextTick()
• Template refs

Features exclusive to Vue

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

How petite-vue compares to Alpine

Though petite-vue was inspired by Alpine and addresses similar problems, it differs from Alpine due to its minimalism and compatibility with Vue.

For example, petite-vue is around half the size of Alpine, and unlike Alpine, it doesn’t ship with a transition system.

Additionally, Alpine and petite-vue have different designs. Although 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.

Getting started with petite-vue

To get started with petite-vue, you need to include a script tag that points to the petite-vue package. As an example, 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++">&#128077;</button>
    </p>
    <p>
      {{ downVotes }} <button @click="downVotes++">&#128078;</button>
    </p>
  </div>

The defer attribute on the script tag causes the script loading petite-vue to load after the HTML content is parsed by the browser. The init attribute tells petite-vue to automatically query and initialize all elements that have v-scope, and the v-scope tells petite-vue what region of the page to handle. We also pass in the upVotes and downVotes states to be available to that region.

Manual initialization

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>

petite-vue CDN production URL

In our example, we access 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 URL while in production.

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.iife.js must be used in a <scripttype="module"> block.

When to use petite-vue

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

Conclusion

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 obtain its light size.

At the time of writing,petite-vue is still pretty 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.