Front-end programmers are no strangers to Youyuxi and the Vue framework they developed. Vue, a progressive JavaScript framework for building user interfaces, has been updated to version 3.0 since it was released in 2014 and gained a lot of traction with developers. Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up. Vue’s core library focuses only on the view layer, making it easy to get started and integrate with third-party libraries or existing projects. On the other hand, when used in conjunction with a modern toolchain and a variety of supporting libraries, Vue is perfectly capable of powering complex single-page applications. Yuyu Creek recently released a release of Vue optimized for progressive enhancement — Petite-Vue, which is only about 5KB in size. Petite-Vue has the same template syntax and responsive mental model as the standard Vue, but the difference is that Petite-Vue is optimized for a small amount of interaction with “sprinkle” on an existing HTML page rendered by the server frame.

The beauty of Petite-Vue is not only its small size, but also its ability to use an optimal implementation for progressive enhancement, which is its main difference from standard Vue and its main advantage. Yu Yuxi reveals that Petite-Vue works in a similar way to Vue 1, but with better implementation details: Petite-vue traverses the actual DOM and uses @vue/reactivity to attach (attach) fine-grained reactive effects so that updates can reach each binding exactly.

The Petite-Vue project gained a lot of attention after it was released, appearing on the GitHub Trending list many days in a row and gaining 2,300 stars in just a few days.

Project Address:https://github.com/vuejs/peti…

Now let’s look at Petite-Vue in more detail.

The main features

Petite-Vue has the following features:

The Vue-compatible template syntax, which is only about 5.8 KB in size, is DOM based (mutates in place) and is driven by @Vue/Reactivity

How to use it?

Petite-vue can be used directly without the build step by simply loading it from the CDN:

<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>
  • Use V-Scope to mark the areas of the page that should be controlled by petite-vue.
  • The defer attribute causes the script to execute after the HTML content has been parsed.
  • The init attribute causes the petite-vue to automatically query and initialize all elements on the page that are marked by the V-scope.

If you do not want to use the above automatic initialization method, you can remove the init property and move the script to the end of < body > :

<script src="https://unpkg.com/petite-vue"></script>
<script>
  PetiteVue.createApp().mount()
</script>

Or use ES Module Build:

<script type="module">
  import { createApp } from 'https://unpkg.com/petite-vue?module'
  createApp().mount()
</script>

In addition to the initialization method, the project page of petite-vue also covers CDN URL production, Root Scope, lifecycle events, and so on. See the GitHub project page for more details.