Petite Vue Introduction with Example

Petite Vue Introduction with Example

Comments 0 Comment

Petite Vue.js is a new one from the Vue.js team which mainly focuses on optimization. It is only 5kb in size. Here the small amount of interactions are only done with HTML elements. So the question is what is this and what it’s for ?.

Petite Vue.js is a JavaScript library which creates the DOM based mutates in places. This will deal with the HTML elements directly similar to Alpine.js. It uses Vue.js template and reactivity modules to update the DOM elements dynamically when the data changes. So here in this Petite Vue Introduction with Example article we are going to look at more details and use cases of petite vue.js in detail. Let’s take a deep dive into it.

Petite Vue Introduction with Example

Petite Vue Introduction with Example

Petite Vue.js available in CDN network. So we can take it from directly as follows,

<html>

<script src="https://unpkg.com/petite-vue" defer init></script>

<!--process only below element (v-scope specfied elements) -->
<div v-scope="{ count: 0 }">
  {{ count }}
  <button @click="count++">do increment</button>
</div>

</html>

In the above example, count is a reactive one. While you click the button, count changes( data changes ) and it updates the DOM. Reactivity achieved right !. Note that here we are using some more terms, that we described below,

  • We are using defer to execute the script after the HTML parsing operations.
  • init plays a major role here. init is a custom element that tells petite vue.js to automatically mount the application. You can find this logic from  https://github.com/vuejs/petite-vue/blob/main/src/index.ts#L9
  • v-scope will be used to denote the area where the petite vue.js controls the page. Petite Vue.js processes only the v-scope specified element with its child elements.

Without Auto Init

In addition, if you don’t want the auto init , remove it from the script tag. But you have to do it manually to the end of the body as follows.

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

Root Scope – Global Data Object

We can pass the optional data object to createApp()  function. This will act as a global data and available to all expressions.

<html>

<script src="https://unpkg.com/petite-vue"></script>

<!-- global data object passed to createApp available -->
<div v-scope>
  <p>{{ name }}</p>
  <p>{{ reverseName }}</p>
  <button @click="addNumber">Add Number to Name</button>
</div>

<script>
    PetiteVue.createApp({
    // available to all expressions and act as reactive data
    name: 'Program Easily',
    number: 0,
    // getters
    get reverseName() {
      return this.name.split("").reverse().join("");
    },
    // methods
    addNumber() {
      this.name = this.name + ' ' + this.number++
    }
  }).mount()

</script>

</html>

In the above example, we are using variables, getters and methods as global data to all expressions. We can use these values inside v-scope elements. It will maintain reactivity, when you change the data, it will update the DOM elements. You can check the full working example below,

Create Components – Petite Vue Introduction with Example

Creating components using Petite vue.js is a little bit different. We have to create a reusable function that will return the literal object. The returned object will be available as props inside the template. And you need to specify the template with the $template key in the return object. There are two ways to provide the template value.

  1. Template String.
  2. ID selector to template element.
<html>

<script src="https://unpkg.com/petite-vue"></script>

<template id="pe-btn">
    <div :style="{ margin: '8px'}">
        <button :style="{ padding: '8px', color: color, fontSize: size + 'px' }"> {{ label }} </button>
    </div>
</template>

<div v-scope :style="{ display: 'flex' , justifyContent: 'center'}">
<div v-scope="peBtn({label: 'Red Button', color : 'red', size: '20'})"></div>
<div v-scope="peBtn({label: 'Green Button', color : 'green', size: '20'})"></div>
<div v-scope="peBtn({label: 'Yellow Button', color : 'yellow', size: '20'})"></div>
</div>

<script>

// reusable function that will return the literal object
function peBtn(props){
    return {
        $template: "#pe-btn",
        label: props.label,
        color: props.color,
        size: props.size
    }
}

PetiteVue.createApp().mount()

</script>

</html>

In the above example, we are creating the button component. The button component has three props namely label, color and size. Likewise you can create your own components with n number of props. When you wish to use your component you have to give v-scope attribute to the parent element. So that Petite Vue.js listen and process those elements. You can check the full working example below,

Reactive Modules – Petite Vue Introduction with Example

Already we have seen the createApp() module which is used to mount the application. In addition Petite Vue.js provides a reactive module ( from @vue/reactivity ). Using a reactive module, we can create a global store. The data inside this store will act as reactive data and available throughout the application. Let us check with below example,

<html>
  <script src="https://unpkg.com/petite-vue"></script>
  <!-- local data object -->
  <div
    v-scope="{ 
      localName: 'Local PE', 
      localNumber: 0,
      get reverseName() {
        return this.localName.split('').reverse().join('')
      },
      addNumber() {
        this.localName = this.localName + ' ' + this.localNumber++;
      },
     }"
  >
    <h2>Global</h2>
    <!-- using global reactive data object -->
    <p>Name : {{ store.globalName }}</p>
    <p>Reverse Name : {{ store.reverseName }}</p>
    <button @click="store.addNumber">Add Number to Global Name</button>
    <h2>Local</h2>
    <!-- using local reactive data object -->
    <p>Name : {{ localName }}</p>
    <p>Reverse Name : {{ reverseName }}</p>
    <button @click="addNumber">Add Number to Local Name</button>
  </div>
  <script>
    // global reactive store
    const store = PetiteVue.reactive({
      globalName: "Global PE",
      globalNumber: 0,
      // getters
      get reverseName() {
        return this.globalName.split("").reverse().join("");
      },
      // methods
      addNumber() {
        this.globalName = this.globalName + " " + this.globalNumber++;
      },
    });
    // pass reactive object to createApp, so that it will act as global store
    PetiteVue.createApp({ store }).mount();
  </script>
</html>

In the above example, we are creating a global store using reactive objects. And we are creating local data objects using v-scope value. The global store data available throughout the application. At the same time, local data objects are accessible only inside the respective v-scope element. Here the state will maintain that Add number to Global Name  will change the global records. The same way Add number to Local Name will change the local records.  You can check the full working example,

Summary

  • Petite Vue.js is a JavaScript library which creates the DOM based mutates in places.
  • It uses Vue.js template and reactivity modules to update the DOM elements dynamically when the data changes.
  • v-scope will be used to denote the area where the petite vue.js controls the page. Petite Vue.js processes the child elements only inside the v-scope specified element.
  • Petite Vue.js provides a reactive module ( from @vue/reactivity). Using a reactive module, we can create a global store.
  • And it’s a new one. So let’s wait and will see the full features of Petite vue.js

References

Leave a Reply

%d bloggers like this: