Kelvin Omereshone Kelvin is an independent software maker currently building Sailscasts, a platform to learn server-side JavaScript. He is also a technical writer and works as a Node.js consultant, helping clients build and maintain their Node.js applications.

Introduction to petite-vue: A tiny new subset of Vue  

4 min read 1380

Introduction Petite Vue

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!

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, therefore simplifying progressive enhancement. Let’s see how it works!

Fundamental features of petite-vue

Let’s understand how petite-vue works by looking at its fundamental features.

No build tooling

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>

Small bundle size

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.

Vue compatible template syntax

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.

We made a custom demo for .
No really. Click here to check it out.

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.

Standard Vue utilizes render functions, allowing it to render on platforms other than the web. petite-vue runs on a webpage and therefore mutates the DOM directly. As result, petite-vue does not need a compiler, decreasing overall size. 

Driven by @vue/reactivity

The @vue/reactivity package is responsible for both Vue and Alpine reactivity. 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. 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 exclusive features

petite-vue introduces some new features 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-hmtl
  • v-pre
  • v-once
  • v-cloak
  • reactive()
  • nextTick()
  • Template refs

Exclusive Vue features

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.

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.

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. 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 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.

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

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.

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 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.

Experience your Vue apps exactly how a user does

Debugging Vue.js applications can be difficult, especially when there are dozens, if not hundreds of mutations during a user session. If you’re interested in monitoring and tracking Vue mutations for all of your users in production, try LogRocket. https://logrocket.com/signup/

LogRocket is like a DVR for web apps, recording literally everything that happens in your Vue apps including network requests, JavaScript errors, performance problems, and much more. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred.

The LogRocket Vuex plugin logs Vuex mutations to the LogRocket console, giving you context around what led to an error, and what state the application was in when an issue occurred.

Modernize how you debug your Vue apps - .

Kelvin Omereshone Kelvin is an independent software maker currently building Sailscasts, a platform to learn server-side JavaScript. He is also a technical writer and works as a Node.js consultant, helping clients build and maintain their Node.js applications.

Leave a Reply