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
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.
If you haven’t yet used Sprig, check out our videos on the topic.
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.
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
laughing evaluates to
A very simple example but you can easily build on this for a lot functionality you might need for simple web page interactions.
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.