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 progressive enhancement framework that is a miniature version of the complete Vue.js framework.
The creator of Vue, Evan You, built petite-vue to be an easy drop-in for progressive enhancement. He saw a need to have something that can add reactivity to a web page without the overhead of Vue. I call these “sprinkle tools” because they let sprinkle around UI and reactivity enhancements with minimal effort and code
What are other similar tools?
The nearest competitor to petite-vue is Alpine.js. Both Vue and Alpine.js are popular in the Laravel web development ecosystem.
petite-vue offers a similar set of tools and functionality as Alpine.js and sits in the same spot in the tool stack.
If you’re already comfortable using Vue, then petite-vue will be simple to adopt and use.
In the Craft CMS ecosystem, Sprig (via htmx) would be the closest competitor. Sprig is also a sprinkle tool that allows you to add reactive components and a more dynamic UI to your web pages with very little code. Sprig has the advantage of letting you do that right inside your Twig template without any JavaScript at all.
If you haven’t yet used Sprig, check out our videos on the topic.
Do you have to use a complicated build system?
petite-vue doesn’t require a build system at all. Instead, you can include the petite-vue source directly 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 appropriate HTML element; and that’s it!
The best part of petite-vue and other “sprinkle tools” is that you don’t have to adopt an extensive framework and all of its fixin’s to get the functionality. Instead, you drop it in and apply where needed.
A Simple Example of petite-vue
Here’s a very simple example of using petite-vue to make a set of emojis appear when clicking a link. This example is only to demonstrate importing petite-vue, creating a new app, and mounting it. You’ll see how we use v-scope to scope the app to just the one div, and how we use a simple method (laugh() right in the app object to set our value to true. The click event calls laugh() and updates the value. Since we’re using Vue’s reactivity functionality, we use v-show to show the contents of the div when laughing evaluates to true.
See the Pen petite-vue: simple demo END by Ryan Irelan (@mijingo) on CodePen.
A very simple example but you can easily build on this for a lot functionality you might need for simple web page interactions.
How can I get started using it?
We have two videos available now that cover how to get started with petite-vue. One video is a complete lesson I created with three different examples, and the other 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 minimal effort. He also wrote an article about it.