PetiteVue is a library from the creator of Vue. The goal was to make a very simple library that could be dropped into a project that needed just a bit of interactivity. Something to replace jquery and in the vein of alpinejs.
I think it succeeds at that task and the best part is that it has the same syntax and logic as Vue proper. This means that if you know Vue, you probably already have a good handle on PetiteVue. If you don't know Vue, then you get to learn Vue as well by using this library.
This will be a relatively short and easy set of tutorials to just go over the core ideas of PetiteVue. You can read all about it on the github page.
https://github.com/vuejs/petite-vue
The other thing I really like about this project is that the creator considers it done for now and there are no new features being added. He is focused on working on Vue so this project is definitely on the backburner. I like that fact because it ultimately means, once you learn and use PetiteVue, there isn't more stuff to learn and keep up with.
There is something that is lost in modern web development when we need to keep learning and evolving the way we do things. It might be good and certainly going to PetiteVue from jQuery is great but other times it is change for change's sake which is pointless.
Anyway, my ideas aside, let's look at what the goal of this tutorial is.
The goal of this project is going to be to build a searchable and sortable list of workers. This means we will be doing looping, conditionals and templating using PetiteVue.
Let's get started!
I'm going to assume that you already have a working development server, this can be nginx or some other system where you are able to load web page in a browser.
I use nginx and that is a simple answer but it may only be available to Linux. On Windows you can use WSL2 to install nginx and serve files that way as well.
You will need to create a folder that contains an index.html and a js folder:
mkdir petite-vue
cd petite-vue
mkdir js
touch index.html
We are going to use PetiteVue in ES6 mode meaning we can import the functions we will be using from PetiteVue.
Let's create an index.html with a script tag and a style tag. This way we can make sure we are starting on the right foot.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PetiteVue Tutorial</title>
<link rel="icon" href="data:;base64,=">
<style>
</style>
</head>
<body>
<div id="app">
<h1>Hello, World!</h1>
</div>
<script type="module">
</script>
</body>
</html>
We are going to write all of the styles in the style tags in the head. All of our javascript code is going to go in the script tag in the body.
We are setting the script to be a module so that way we can use modern javascript things like import and await. We can use the import statement to only get the functions we need and we can use top level awaits inside module.
At this point if we view our index.html in the browser, we should see just a Hello World in large font.
Now we need to download petite-vue to our js folder.
curl "https://unpkg.com/petite-vue@0.4.1/dist/petite-vue.es.js?module" > petite-vue.es.js
Instead of downloading the file, you can also use it directly, simply use this import statement in your code:
import { createApp } from 'https://unpkg.com/petite-vue@0.4.1/dist/petite-vue.es.js?module'
Now let's update out script tag to use PetiteVue.
<script type="module">
import { createApp } from '/js/petite-vue.es.js'
createApp({
name: "Nivethan",
}).mount("#app");
</script>
The first thing we are doing is importing the createApp function from petite-vue. This is the only function we are using in our code, so we don't need to include the entire library.
The next thing we do is initialize our application. We are saying that we are going to have vue variable called name and that this will be mounted to the element that has the id "app".
This mounting method allows us to have multiple areas of interactivity that are all separate.
Now we can update our html to use this variable we created.
<div id="app">
<h1>Hello, {{ name }}!</h1>
</div>
Voila! With that we should now be able to update our browser and see that we can now dynamically change things on the page.
This functionality is what makes modern frameworks better than jquery as templating html was the most difficult thing in the past.
Now if we ever change name in the javascript, it will be immediately updated in the html as well.
In the next chapter we will look at building a table by looping over data!