Learn petite-vue

petite-vue is a new progressive enhancement framework that is a miniature version of the complete Vue.js framework.


petite-vue is a new pro­gres­sive enhance­ment frame­work that is a minia­ture ver­sion of the com­plete Vue.js frame­work.

The cre­ator of Vue, Evan You, built petite-vue to be an easy drop-in for pro­gres­sive enhance­ment. He saw a need to have some­thing that can add reac­tiv­i­ty to a web page with­out the over­head of Vue. I call these sprin­kle tools” because they let sprin­kle around UI and reac­tiv­i­ty enhance­ments with min­i­mal effort and code

What are oth­er sim­i­lar tools?

The near­est com­peti­tor to petite-vue is Alpine.js. Both Vue and Alpine.js are pop­u­lar in the Lar­avel web devel­op­ment ecosystem. 

petite-vue offers a sim­i­lar set of tools and func­tion­al­i­ty as Alpine.js and sits in the same spot in the tool stack. 

If you’re already com­fort­able using Vue, then petite-vue will be sim­ple to adopt and use.

In the Craft CMS ecosys­tem, Sprig (via htmx) would be the clos­est com­peti­tor. Sprig is also a sprin­kle tool that allows you to add reac­tive com­po­nents and a more dynam­ic UI to your web pages with very lit­tle code. Sprig has the advan­tage of let­ting you do that right inside your Twig tem­plate with­out any JavaScript at all. 

If you haven’t yet used Sprig, check out our videos on the top­ic.

Do you have to use a com­pli­cat­ed build system?

petite-vue doesn’t require a build sys­tem at all. Instead, you can include the petite-vue source direct­ly from the CDN with a script tag and then set the scope (what parts of the DOM it should affect) via v-scope attribute on the appro­pri­ate HTML ele­ment; and that’s it!

The best part of petite-vue and oth­er sprin­kle tools” is that you don’t have to adopt an exten­sive frame­work and all of its fixin’s to get the func­tion­al­i­ty. Instead, you drop it in and apply where needed.

A Sim­ple Exam­ple of petite-vue

Here’s a very sim­ple exam­ple of using petite-vue to make a set of emo­jis appear when click­ing a link. This exam­ple is only to demon­strate import­ing petite-vue, cre­at­ing a new app, and mount­ing it. You’ll see how we use v-scope to scope the app to just the one div, and how we use a sim­ple method (laugh() right in the app object to set our val­ue to true. The click event calls laugh() and updates the val­ue. Since we’re using Vue’s reac­tiv­i­ty func­tion­al­i­ty, we use v-show to show the con­tents of the div when laughing eval­u­ates to true.

See the Pen  petite-vue: sim­ple demo END by Ryan Ire­lan (@mijingo) on Code­Pen.

A very sim­ple exam­ple but you can eas­i­ly build on this for a lot func­tion­al­i­ty you might need for sim­ple web page interactions.

How can I get start­ed using it?

We have two videos avail­able now that cov­er how to get start­ed with petite-vue. One video is a com­plete les­son I cre­at­ed with three dif­fer­ent exam­ples, and the oth­er is an excerpt with Andrew Welch from the CraftQuest on Call livestream. In the excerpt, Andrew shows how he rebuilt a live search tool in petite-vue with min­i­mal effort. He also wrote an arti­cle about it.

Addi­tion­al Help­ful Infor­ma­tion on petite-vue