vuejs Archives - Program Easily

Petite Vue Introduction with Example

Admin — Sat, 17 Jul 2021 18:25:15 +0000

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.js available in CDN network. So we can take it from directly as follows,







  {{ count }}

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.

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.







  {{ name }}
  {{ reverseName }}

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.

Template String.
ID selector to template element.

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,


  
  
  
    Global
    
    Name : {{ store.globalName }}
    Reverse Name : {{ store.reverseName }}
    
    Local
    
    Name : {{ localName }}
    Reverse Name : {{ reverseName }}

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

The post Petite Vue Introduction with Example appeared first on Program Easily.

Teleport in Vue 3 with Example

Admin — Tue, 13 Jul 2021 06:47:54 +0000

Creating the web pages using components is a good idea. So that we can re-use the logic and structure of the design. We have to make a component hierarchy or tree to make the UI better. In Vue.js we are using template string or render function to build the HTML DOM in the components. The Vue compiler will compile it and make the div elements for us

However, sometimes logically, we need one component which could be a child to its parent component, But the component HTML div should not be nest to its parent. Meanwhile we need to place it somewhere else in the DOM. Little bit confusing right.

Generally the HTML tree structure will be the same as component tree structure. But if you want to change one component div’s parent somewhere else in the DOM, we can go for teleport in Vue.js. It is an advanced feature introduced in Vue.js 3. If you are not familiar with Vue.js You can refer to our page Vue Let’s go to the topic in detail.

Teleport

Teleport will change the parent element of a component. Note that teleport will move actual DOM nodes instead of recreating it. This will maintain the same component instance. Teleport has two attributes.

to – String
disabled – Boolean

to – string is a prop denoting a target parent element where the teleport will move it’s content. It is a mandatory prop. This prop can be a valid query selector, or an HTML element (Example : body).

disabled – boolean is a prop which disables the teleport operation. This is an optional Boolean prop. If we apply the disable prop, this will not move the teleport content to the target element. At the same time it will render the elements where you specified the teleport tag just like normal components. A great example for this use case is, streaming the video in either pop up or normally like below,

Teleport in Vue 3 with Example

Generally, we can achieve the same operation without teleport also. If we need to change the positions of the elements but quickly ,the process becomes difficult. But teleport makes the work simple for us. In our example, we are going to teleport a component to HTML #toPlace div. Firstly we are creating Teleport component as follows

// TeleportComp.vue

Secondly we are creating the TeleportChild.vue component as follows,

// TeleportChild.vue

In the above example, we are using the child component TeleportChild.vue inside the Teleport Component. Note that here, logically TeleportChild.vue component will remain as child for TeleportComp.vue component even when it’s position changed (But actually not). Moreover the Vue.js Dev-tools also will have the same component hierarchy structure. Now we are creating the TeleportDemo.vue file to check the behaviors. Here we are enabling teleport operation based on disableTeleport flag.

// TeleportDemo.vue

In the above example, if disableTeleport is set to true, then the teleport component acts as a normal component. if disableTeleport is set to false, the teleport component will be moved to #toPlace div element. Teleport will not change the hierarchy of component tree structure logically. But the effect will reflect in the HTML DOM. Now the image element moved to #toPlace element. You can check the full working example below,

Multiple Teleport in Vue 3 with Example

Now we are going to see multiple teleport operations. Here the same target element will have multiple teleport components. When we move the teleport components, It will follow the moving order and append to the target element.

In the above example, the #toPlace element will have A,B div elements on teleport operation. Now we are creating TeleportMultipleDemo.vue file where we are moving two teleport components to same #toPlace target element. You can refer the full working example below

Summary

Teleport will change the parent of a component. Note that teleport will move actual DOM nodes instead of recreating it.
Even though teleport changes the parent elements, it will maintain the instances of components.
If disabled flag is given, it will render the elements where you specified the teleport tag just like normal components.
The same target element will have multiple teleport components.

Reference

The post Teleport in Vue 3 with Example appeared first on Program Easily.

Dynamic Component With Cloning Example Vue.js

Admin — Thu, 10 Jun 2021 18:39:49 +0000

Nowadays, web developers prefer components to build the web pages effectively. Splitting the UI into reusable pieces is the goal of component creation. Each component will render specific predefined HTML design. There is no problem when the component is static.

But sometimes based on condition or scenario, we have to render different components dynamically. To achieve this without using routing, Vue.js provides a special feature for us – Dynamic Components. Let’s take a deep dive to understand it clearly. If you are new to Vue.js Component topics, you can read about Components in Vue 3 and Single File Components Vue 3 before moving to this session.

Dynamic Component With Cloning Example Vue.js

In the below example, we can dynamically change the component. Here the old component will unmount and the new component will mount when the changes are made.

We have to use is attribute with component tag to achieve dynamic component features in Vue.js. Note that, here when we change the componentName the new component will render.

Dynamic Component With Native HTML elements

We can use is attribute with native HTML elements. When we bind an element to is attribute, it will render the HTML element in the DOM.

This is Button
// This will show a button

In addition, we can use the Vue.js component inside the HTML element using is attribute. In the below example, we are using my-row component inside the table HTML element

keep-alive with Dynamic Component

Sometimes when we switch the components, we need to maintain the old component state or need to avoid the re-render process. Which means, we want to cache the component states. To achieve this, Vue.js provides a keep-alive feature. We can use it as below to cache the component states,

Dynamic Component With Cloning Example Vue.js

Generally in Vue.js we can use a for loop to clone a single component. Dynamic components along with a for loop helps us to clone different types of components at a go. Firstly we are going to create components for button, input and text-area.

vuejs Archives - Program Easily

Petite Vue Introduction with Example

Petite Vue Introduction with Example

Without Auto Init

Root Scope – Global Data Object

Create Components – Petite Vue Introduction with Example

Reactive Modules – Petite Vue Introduction with Example

Global

Local

Summary

References

Teleport in Vue 3 with Example

Teleport

Teleport in Vue 3 with Example

Multiple Teleport in Vue 3 with Example

Summary

Reference

Dynamic Component With Cloning Example Vue.js

Dynamic Component With Cloning Example Vue.js

Dynamic Component With Native HTML elements

keep-alive with Dynamic Component

Dynamic Component With Cloning Example Vue.js

DcButton.vue

DcInput.vue

DcTextArea.vue