Petite Vue

10 March 2023

I’ve always liked writing little tools and apps using Vue2 as a Progressive Enhancement.

For a while my workflow has been to remix at glitch.new/~ste-vue on Glitch.

I’ve noticed that Petite Vue is just as easy to use, it’s in the style of the Vue3 composition API, and it’s smaller than referencing Vue2. You can use petite-vue as either an ES module, or with an IIFE (one of those functions that runs itself right away), and with the latter you’ll get OK browser support across older tech (at least equivalent to using Vue2, I guess??)

Size comparison

My new boilerplate

So I’ve ported my barebones boilerplate to Petite-Vue in two flavours (hosted on this site):

• IIFE: /assets/petite-vue/
• ESM: /assets/petite-vue/esm/

Getting started with petite-vue IIFE

I think the IIFE variant on petite-vue is a little under-documented, so I’m going to explain how to get started.

• Add a script tag to src the petite-vue script from unpkg or from local files, like you would for Vue2 progressive enhancement.
• Add the script tag for your app (or link out to your app.js)
• Within your app script, call PetiteVue.createApp({ ... })
  • PetiteVue is exposed as a global
  • createApp is Vue3 setup style. In this object, you directly define all your data members and functions.

<script src="https://unpkg.com/petite-vue"></script>
<script>
  PetiteVue.createApp({
    message: "Hi",
    count: 1,
    mounted() {
      console.log("mounted");
    },
    increment() {
      this.count++;
    },
  }).mount()
</script>

I’ve chosen to go with the “manual init” style here.

Next, you need to add v-scope to the element that is your top-level app element (like using <div id='#app'> and el: '#app' in Vue2)

<div v-scope @vue:mounted="mounted" class="ma2 ma4-ns">
  <p>My app stuff - {{message}}</p>
</div>

The mounted function isn’t automatically hooked up as it would be in Vue2. And you can call it anything, as long as you add the @vue:mounted syntax as above. The todomvc example in the petite-vue repo has incorrect, old syntax for this; that caught me out!

All the other syntax for v-model, v-if, v-for, is just as you know and love it.

What about computed?

petite-vue says it doesn’t support computed, but don’t let that put you off. The things you used to do with computed in Vue2 can now be done with plain functions in the app object.

You do have to invoke them in the template though, so they look like {{ total() }} instead of just {{ total }}. No worries.

For another example, see this quick port of my scran calculator

It’s a beta

Since the version is still below 1.0, you can expect things to change. However, petite-vue as it stands today is so small and simple that I would happily treat it as a “forever” dependency, with no need to stay up-to-date. The current version 0.4.1 has remained unchanged for more than a year (since Jan 18th 2022), and rather than a signal that it’s dead, I’d like to take that as a signal of stability 😁