NextTick API in Vue.js

<script>
import { nextTick } from 'vue'

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    async increment() {
      this.count++

      // DOM not yet updated
      console.log(document.getElementById('counter').textContent) // 0
    }
  }
}
</script>

<template>
  <button id="counter" @click="increment">{{ count }}</button>
</template>

In the above program, we are changing the state of count by doing count++. But this will not update the DOM instantly rather the vue.js frameworks collects this information in the backend. After the whole execution of increment() method, It will update the DOM asynchronously.

But the problem is document.getElementById('counter').textContent) returns 0 in the increment() method. so if someone wants to use DOM element immediately, which is not possible in Vue.js directly. That’s where we have to use nextTick global API. nextTick allows you to execute code after you have changed some data and Vue.js has updated the virtual DOM based on your data change, but before the browser has rendered that change on the page.

We can pass the callback function to the nextTick(callback(){}) which can be triggered after the successful DOM update. You can either pass a callback as an argument, or await the returned Promise.

import { nextTick } from 'vue'

export default {
  methods: {
    increment() {
      this.count++
      nextTick(() => {
        // access updated DOM
      })
    }
  }
}

Why Not SetTimeout ?

Some people would think, why not setTimeOut!. We can also use setTimeOut But the problem is When you invoke setTimeout…

setTimeout(function() { 
    // access updated DOM
}, 100);

then the browser would have a chance to update the page, and then your callback would get called. So the UI will render the old record first and then the new record will come. It’s not look good right. But with the help of nextTick() we can change the DOM value before being render into the screen. That’s the beauty of this API in Vue.js

Summary

nextTick() can be used immediately after a state change to wait for the DOM updates to complete. We should not use setTimeOutto update the DOM rather should prefer nextTick()

The post When to use NextTick API in Vue.js appeared first on Program Easily.

Pinia is a library store for Vue.js. It will work with Vue.js 3 as well as Vue.js 2. Pinia holds the state and business logic which is not bounded with component object trees. In other words, I would say it creates a global state where everybody can read and write the data. Pinia has three area’s as follows,

1. State
2. Getters
3. Action

We can assume and compare these things with data, computed and methods in components.

Why Pinia (A Store)

Store will have the data that can be used everywhere in our application. Meanwhile we should avoid the local data in the store which can be added in the component instead. Pinia is a choice if your application needs to access the global state values.

Features of Pinia

• Hot module replacement
  • Modify your stores without reloading your page
  • Keep any existing state while developing
• Plugins: extend Pinia features with plugins
• Proper TypeScript support or autocompletion for JS users
• Server Side Rendering Support
• Devtools support
  • A timeline to track actions, mutations
  • Stores appear in components where they are used
  • Time travel and easier debugging

Full Tutorial

Installations

You can install pinia with the help of NPM or Yarn as follows,

npm install pinia
or
yarn add pinia

Inject Pinia with CreateApp

Here we are going to have only one store for the application. So we have to create its instance and inject the same in VUE createApp. You can call it a root store.

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

So what createPinia does here ?. It creates the entity which holds the state for our application. And It’s global state where one can read and write as well. It has three concepts or property’s

1. state
2. getters
3. actions

(You can assume this three components with data, computed and methods)

Create the Store

First we need to create the store template. We can create a store template using defineStore() and it requires a unique name. We may use this template across our application.

import { defineStore } from 'pinia'

// useStore could be anything like useUser, useCart
// the first argument is a unique id of the store across your application
export const useStore = defineStore('main', {
  // other options...
})

Second we need to use this store template inside the setup() function so that it will create the store. We have to call useStore() as follows,

import { useStore } from '@/stores/counter'

export default {
  setup() {
    const store = useStore()

    return {
      // you can return the whole store instance to use it in the template
      store,
    }
  },
}

Once the store is created you can access its properties like state, getters and actions.

State

The state is the heart of the system. It is a function that returns the initial state of the application.

import { defineStore } from 'pinia'

const useStore = defineStore('storeId', {
  // arrow function recommended for full type inference
  state: () => {
    return {
      // all these properties will have their type inferred automatically
      counter: 0,
      name: 'Eduardo',
      isAdmin: true,
    }
  },
})

We can access the store to read and write its data through store instance, and we can reset it to the initial state as well

const store = useStore()

store.counter++

store.$reset()

Getter

We can define the getters property in defineStore() template. I would say, it is a replacement for computed values.

export const useStore = defineStore('main', {
  state: () => ({
    counter: 0,
  }),
  getters: {
    // automatically infers the return type as a number
    doubleCount(state) {
      return state.counter * 2
    },
    // the return type **must** be explicitly set
    doublePlusOne(): number {
      // autocompletion and typings for the whole store 
      return this.doubleCount + 1
    },
  },
})

Then we can access and use the getters inside the template as follows,

<template>
  <p>Double count is {{ store.doubleCount }}</p>
</template>

<script>
export default {
  setup() {
    const store = useStore()

    return { store }
  },
}
</script>

Actions

Actions are the replacement for the methods. We can add our actions in the defineStore() template. Unlike getters, we can write asynchronous operations inside action. It will useful for creating API calls for our business logic

import { mande } from 'mande'

const api = mande('/api/users')

export const useUsers = defineStore('users', {
  state: () => ({
    userData: null,
    // ...
  }),

  actions: {
    async registerUser(login, password) {
      try {
        this.userData = await api.post({ login, password })
        showTooltip(`Welcome back ${this.userData.name}!`)
      } catch (error) {
        showTooltip(error)
        // let the form component display the error
        return error
      }
    },
  },
})

Summary

• Pinia is a store library for Vue, it allows you to share a state across components/pages.
• Compared to Vuex, Pinia provides a simpler API with less ceremony, offers Composition-API-style APIs, and most importantly, has solid type inference support when used with TypeScript.
• The formula is Create the template -> create the store with state, getters and actions and use across the application.

The post Pinia – The Vue Store Library appeared first on Program Easily.

export default {
  props: ['foo'],
  created() {
    // props are exposed on `this`
    console.log(this.foo)
  }
}

Let’s take a deep dive into that with this post. If you are not familiar with Vue.js components, You should read Components in Vue 3  first.

One way data flow – Props in Vue 3

Props follows one way data flow with it’s child component property. As a result, when we update the value of parent props, it will flow down and update the child property as well. At the same time it will not do vice versa. If you want to update the component state, the flow should start from the parent and all props in the child component will be refreshed with the latest value. We are having event emit concept to reverse back from child to parent in Vue.js.

export default {
  props: ['foo'],
  created() {
    // ❌ warning, props are readonly!
    this.foo = 'bar'
  }
}

Suppose if you want to change the prop in the child component based on business scenario, you can transform the same using computed in Vue.js

export default {
  props: ['size'],
  computed: {
    // computed property that auto-updates when the prop changes
    normalizedSize() {
      return this.size.trim().toLowerCase()
    }
  }
}

Note

However, when passing arrays and objects as props, Vue.js will not prevent mutation of it’s nested properties. Because objects and arrays are passed by reference. Firstly, you should avoid such mutations as a best practice. Secondly, if you need this scenario in-deed, the child can emit an event and the parent listens to it and performs the mutation.

Static and Dynamic Props

The static props are nothing but just assign the static values like below,

<Blog title="I am a static prop example" />

You can also assign dynamic values to props with the help of  v-bind or its : like below

<!-- Dynamically assign the value of a variable -->
<Blog v-bind:title="post.title"></Blog>
// OR
<Blog :title="post.title" </Blog>

Passing other different values to prop

We can pass Numbers, Boolean, Arrays as well as Object to a props value.

// Number
<!-- Even though `42` is static, we need v-bind to tell Vue that -->
<!-- this is a JavaScript expression rather than a string.  -->
<Blog :likes="42" />

<!-- Dynamically assign to the value of a variable. -->
<Blog :likes="post.likes" />

// Boolean
<!-- Including the prop with no value will imply `true`. -->
<Blog is-published />

<!-- this is a JavaScript expression rather than a string. -->
<Blog :is-published="false" />

<!-- Dynamically assign to the value of a variable. -->
<Blog :is-published="post.isPublished" />

// Array
<!-- this is a JavaScript expression rather than a string. -->
<Blog :comment-ids="[234, 266, 273]" />

<!-- Dynamically assign to the value of a variable. -->
<Blog :comment-ids="post.commentIds" />

// Object
<!-- this is a JavaScript expression rather than a string. -->
<Blog
  :author="{
    name: 'Veronica',
    company: 'Veridian Dynamics'
  }"
 />

<!-- Dynamically assign to the value of a variable. -->
<Blog :author="post.author" />

Validation – Props in Vue 3

There are three ways of prop validations available in Vue.js. If the validation fails, then Vue.js will warn us in the browser’s JavaScript console. This is really needed to define the component and the application developers are aware of the intention of the component as well.

1. Type validation
2. Mandatory or not (Required)
3. Custom validator

export default {
  props: {
    // 1. Type Validation
    //  (`null` and `undefined` values will allow any type)
    propA: Number,
    // Multiple possible types
    propB: [String, Number],
    // 2. Mandatory validation with default value
    propC: {
      type: String,
      required: true,
      default: "Hello"
    },
    // 3. Custom validator
    propF: {
      validator(value) {
        // The value must match one of these strings
        return ['success', 'warning', 'danger'].includes(value)
      }
    }
  }
}

In setup Hook – Props in Vue 3

The setup function is the entry point of the Composition API in Vue.js. The first argument of the setup function is the props argument. Props inside the setup function are reactive by nature.

export default {
  props: {
    title: String
  },
  setup(props) {
    console.log(props.title)
  }
}

If you destructor the props object, it will lose the reactivity. So we should avoid changing the props object there. But if you really need to destructor the props, you can go for toRefs() and toRef() API.

import { toRefs } from 'vue'

export default {
  setup(props) {
    // turn `props` into an object of refs, then destructure
    const { title } = toRefs(props)
    // `title` is a ref that tracks `props.title`
    console.log(title.value)

    // OR, turn a single property on `props` into a ref
    const title = toRef(props, 'title')
  }
}

Special Feature – Boolean Casting

When we use Boolean props , it has a special casting rule. It is similar to the native Boolean attribute in any programming language. Let me show you with below example,

<!-- equivalent of passing :disabled="true" -->
<MyComponent disabled />

<!-- equivalent of passing :disabled="false" -->
<MyComponent />

// The casting rules for Boolean will apply regardless of type appearance order for below example as well
export default {
  props: {
    disabled: [Boolean, Number]
  }
}

Name Casing in Props

When we declare props in Vue.js we have to follow camelCase. It will avoid to use quotes when we dealing them as property keys, and makes as valid JavaScript identifiers.

export default {
  props: {
    greetingMessage: String
  }
}
// using the “Mustache” syntax (double curly braces)
<span>{{ greetingMessage }}</span>

So when we pass the props values to the child component , we can use camelCase. But Here the convention is kebab-case similar to the one below.

<MyComponent greeting-message="hello" />

Summary

In Conclusion,

• Firstly, we are having props as attributes for Components in Vue.js. Props provides additional information about the components.
• Secondly, props follows one way data flow with it’s child component property. When we update the value of parent props, it will flow down and update the child property as well. At the same time it will not vice versa.
• In Vue.js 3, The first argument of the setup function is the props argument. Props inside the setup function are reactive by nature.

The post Props in Vue 3 appeared first on Program Easily.

const focus = {
  mounted: (el) => el.focus()
}

export default {
  directives: {
    // enables v-focus in template
    focus
  }
}

We can use above directive in the template like below,

<input v-focus />

This is a simple example, we can do lot more with this directives. But, here it will focus the input element assuming you haven’t clicked elsewhere on the page. Let’s take the deep dive into it.

Global Directive Registration

In the above example, we are using local registration. In addition, similar to components, we can globally register custom directives in the application instance. So that we can use the directives through out the application in the templates.

const app = createApp({})

// make v-focus usable in all components
app.directive('focus', {
  /* ... */
})

However, we can prefer to use custom directives only when the desired functionality can only be achieved via direct DOM manipulation. Otherwise we could use v-bind because they are more efficient and server-rendering friendly.

Custom Directives in Vue 3 – Hooks

The directive object is providing lot of optional hook functions. For Instance, we would use this hooks to manipulate the DOM, read the old value, component instance and vnode representation as well.

const myDir = {
  // called before bound element's attributes
  // or event listeners are applied
  created(el, binding, vnode, prevVnode) {
    // see below for details on arguments
  },
  // called right before the element is inserted into the DOM.
  beforeMount() {},
  // called when the bound element's parent component
  // and all its children are mounted.
  mounted() {},
  // called before the parent component is updated
  beforeUpdate() {},
  // called after the parent component and
  // all of its children have updated
  updated() {},
  // called before the parent component is unmounted
  beforeUnmount() {},
  // called when the parent component is unmounted
  unmounted() {}
  }
}

Hook Arguments

• el – We can use el to manipulate the DOM
• binding – it is an object having lot of properties
  • value – the value of the directive. Example, v-my-directive=”VALUE”
  • oldValue – the old value of the directive. only available in beforeUpdate and updated
  • arg – the argument of the directive. Example, v-my-directive:foo
  • instance – the instance of the component
  • dir – the definition object of directive
  • modifiers – the modifier object. Example v-my-directive:foo:bar. Here  the modifiers object would be { foo: true, bar: true }
• vnode – The V Node representation of the element
• prevNode – The element of previous render. Only available in the beforeUpdate and updated hooks

Consider the below example,

<div v-example:foo.bar="baz">

// we can represent above directive as below object

{
  arg: 'foo',
  modifiers: { bar: true },
  value: /* value of `baz` */,
  oldValue: /* value of `baz` from previous update */
}

// binding value as JavaScript object literal

<div v-demo="{ color: 'white', text: 'hello!' }"></div>

app.directive('demo', (el, binding) => {
  console.log(binding.value.color) // => "white"
  console.log(binding.value.text) // => "hello!"
}

Dynamic Argument in Directives

We can also pass dynamic argument to the directives. This is one of the special feature of directive. For example,

<div v-example:[arg]="value"></div>

// Here the directive argument will be reactively updated 
   based on arg property in our component state.

Most important this here is , other than el, we should not modify other read-only properties. If you want so, you can follow this dataset

Function Shorthand

If we wants only mounted and updated behavior of custom directives, then we can use function shorthand there.

<div v-color="color"></div>

app.directive('color', (el, binding) => {
  // this will be called for both `mounted` and `updated`
  el.style.color = binding.value
})

Custom Directives in Vue 3 – on Component

As similar to DOM elements, we can use custom directives on component as well. Here It will apply to a component root element. Note that, sometimes the component may have more than one root node. If so, it will ignore the directives and a warning will be shown. Above all, it is not preferable to use custom directives on component.

<MyComponent v-demo="test" />

<!-- template of MyComponent -->

<div> <!-- v-demo directive will be applied here -->
  <span>My component content</span>
</div>

With Directives

In Addition, we can apply custom directives to v-node using withDirectives as follows,

import { h, withDirectives } from 'vue'

// a custom directive
const pin = {
  mounted() { /* ... */ },
  updated() { /* ... */ }
}

// <div v-pin:top.animate="200"></div>
const vnode = withDirectives(h('div'), [
  [pin, 200, 'top', { animate: true }]
])

Summary

In Conclusion,

• Firstly, the custom directive brings some execution on the elements. We can define custom directive as an object containing lifecycle hooks similar to those of a component.
• Use custom directives only when the desired functionality can only be achieved via direct DOM manipulation.
• You would pass dynamic argument to the directives. This is one of the special feature of directive.

References

• https://vuejs.org/guide/reusability/custom-directives.html#introduction
• https://vuejs.org/guide/extras/render-function.html#custom-directives

The post Custom Directives in Vue 3 appeared first on Program Easily.

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,

<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

• https://github.com/vuejs/petite-vue
• https://www.npmjs.com/package/petite-vue

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

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.

1. to – String
2. 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).

<teleport to="#to-parent-id" /> 
<teleport to=".to-parent-id" /> 
<teleport to="[to-parent-data-teleport]" />

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 to="#popup" :disabled="popupOrInline">
  <video src="./my-movie.mp4">
</teleport>

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
<template>
  <div>
    <teleport :to="teleportTo" :disabled="disableTeleport">
      <TeleportChild:imagePath="imagePath" />
    </teleport>
  </div>
</template>

<script>
import TeleportChild from "./TeleportChild.vue";
export default {
  components: {
    TeleportChild,
  },
  props: {
    teleportTo: {
      type: String,
      default: "body",
    },
    imagePath: String,
    disableTeleport: Boolean,
  },
};
</script>

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

// TeleportChild.vue
<template>
  <img
    :src="imagePath"
    alt="Teleport child Text"
    :style="{ width: '100%', height: '100%' }"
  />
</template>

<script>
export default {
  props: {
    imagePath: String,
    altText: String,
  },
};
</script>

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
<template>
  <div id="toPlace"></div>
  <div :style="{ width: '200px', height: '200px' }">
    <button class="btn" @click="onClickBtn">
      {{ disableTeleport ? "Move to toPlace" : "Come Back" }}
    </button>
    <TeleportComp
      teleportTo="#toPlace"
      imagePath="logo_transparent.png"
      :disableTeleport="disableTeleport"
    />
  </div>
</template>

<script>
import { ref } from "vue";
import TeleportComp from "../components/teleport/TeleportComp.vue";
export default {
  components: {
    TeleportComp,
  },
  setup() {
    let disableTeleport = ref(true);
    const onClickBtn = () => {
      disableTeleport.value = !disableTeleport.value;
    };
    return {
      onClickBtn,
      disableTeleport,
    };
  },
};
</script>
<style scoped>
#toPlace {
  width: 200px;
  height: 200px;
  margin: auto;
  display: flex;
  justify-content: center;
}
.btn {
  background-color: #4999f5;
  border: none;
  color: white;
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
}
.btn:hover {
  background-color: #0417c0;
  color: white;
}
</style>

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.

<teleport to="#toPlace">
  <div>A</div>
</teleport>
<teleport to="#toPlace">
  <div>B</div>
</teleport>

<!-- result-->
<div id="toPlace">
  <div>A</div>
  <div>B</div>
</div>

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

• https://v3.vuejs.org/guide/teleport.html#teleport
• https://v3.vuejs.org/api/built-in-components.html#teleport

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

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.

<!-- Syntax -->
<!-- component changes when componentName changes -->
<component :is="componentName"></component>

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.

<component :is="'button'">This is Button</component>
// 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

<table>
  <tr is="vue:my-row"></tr>
</table>

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,

<!-- components will be cached! -->
<keep-alive>
  <component :is="componentName"></component>
</keep-alive>

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.

DcButton.vue

<template>
  <button class="btn">
    {{ label }}
  </button>
</template>

<script>
export default {
  props: {
    label: {
      type: String,
      default: "Default",
    },
  },
  setup() {
    return {};
  },
};
</script>

<style scoped>
.btn {
  background-color: #4999f5;
  border: none;
  color: white;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 2px 2px;
  cursor: pointer;
}
.btn:hover {
  background-color: #0417c0;
  color: white;
}
</style>

DcInput.vue

<template>
  <div>
    <input
      type="text"
      class="input"
      v-model="value"
      :placeholder="placeHolderLabel"
    />
  </div>
</template>

<script>
export default {
  props: {
    placeHolderLabel: {
      type: String,
      default: "Enter the value",
    },
  },
  data() {
    return {
      value: "",
    };
  },
};
</script>

<style scoped>
.input {
  width: 200px;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
</style>

DcTextArea.vue

<template>
  <div>
    <textarea
      v-model="value"
      rows="3"
      cols="3"
      class="input"
      :placeholder="placeHolderLabel"
    />
  </div>
</template>

<script>
export default {
  props: {
    placeHolderLabel: {
      type: String,
      default: "Enter the value",
    },
  },
  data() {
    return {
      value: "",
    };
  },
};
</script>

<style scoped>
.input {
  width: 200px;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
</style>

Secondly, we are going to create a dynamic component using the component tag. Note that, here we have two props namely componentName, componentProps. So whenever we pass the component name to this component it will render the specific component. We can also provide props for our component at runtime. So let’s do it.

DynamicComp.vue

<template>
  <component :is="componentName" v-bind="componentProps"></component>
</template>
<script>
export default {
  props: {
    componentName: String,
    componentProps: Object,
  },
};
</script>

Since we are going to use input and text area components dynamically, we have to add the same with app component in main.js as follows,

import { createApp } from "vue";
import router from "./router/router.js";
import App from "./App.vue";
import dcInput from "./components/dynamic-comp/DcInput"
import dcTextArea from "./components/dynamic-comp/DcTextArea"

let app = createApp(App);
app.component("dcInput",dcInput)
app.component("dcTextArea",dcTextArea)

app.use(router).mount("#app");

Now we are going to use the above components to create a simple cloning example. Here we are using two methods namely addInput, addTextArea to add input and text area components respectively.

DyanamicComponentDemo.vue

<template>
  <h1>Simple Cloning Component Example</h1>
  <div class="grp">
    <dcButton label="Add Input" @click="addInput" />
    <dcButton label="Add Text Area" @click="addTextArea" />
  </div>
  <dynamicComp
    v-for="(item, index) in items"
    :key="index"
    :componentName="item.componentName"
    :componentProps="item.componentProps"
  >
  </dynamicComp>
</template>

<script>
import { ref } from "@vue/reactivity";
import dynamicComp from "../components/dynamic-comp/DynamicComp.vue";
import dcButton from "../components/dynamic-comp/DcButton.vue";
export default {
  components: {
    dynamicComp,
    dcButton,
  },
  setup() {
    let items = ref([]);
    const addInput = () => {
      items.value.push({
        componentName: "dcInput",
        componentProps: {
          placeHolderLabel: "Cloning Input",
        },
      });
    };
    const addTextArea = () => {
      items.value.push({
        componentName: "dcTextArea",
        componentProps: {
          placeHolderLabel: "Cloning Text Arae",
        },
      });
    };
    return {
      items,
      addInput,
      addTextArea,
    };
  },
};
</script>

<style scoped>
.grp {
  padding-left: 408px;
}
</style

In the above example, we are using a dynamic component with a for loop to clone different components. so whenever we update the items, it will create the new component dynamically. The thing is we have to push the component name and props to items as we did in addInput, addTextArea methods. You can find the full working example below,

Dynamic Component With Cloning Example Vue.js

Full Sources

• https://github.com/programeasily/vue-3-basics/tree/main/src/components/dynamic-comp
• https://github.com/programeasily/vue-3-basics/blob/main/src/page/DynamicComponentDemo.vue

Reference

• https://v3.vuejs.org/guide/list.html#mapping-an-array-to-elements-with-v-for
• https://v3.vuejs.org/api/special-attributes.html#is
• https://v3.vuejs.org/guide/component-dynamic-async.html#dynamic-components-with-keep-alive

Summary

• We can render different components dynamically using component tag.
• The old component will unmount and the new component will mount when the changes are made.
• when we bind HTML elements to is attribute in the component tag, it will render the same in the DOM.
• We can use dynamic components with a for loop to clone different types of components at a go.

The post Dynamic Component With Cloning Example Vue.js appeared first on Program Easily.

During the virtual DOM mounting process, if the V-Node(HTML element or child component) has a ref attribute then the respected element or component instance will be stored under the parent component’s $refs. Let’s take a deep dive into this with an example. Read Components in Vue3 and Single File Components Vue 3 if you are new to Vue.js components.

Template Refs in Vue.js

We can use ref to create the reference for the element or child component. If ref is used on the HTML DOM element then the reference is mapped to the respected element. If ref is used on the child component, then the reference is mapped to the component instance. The parent component $refs object, stores the ref reference.

• Attribute Name : ref
• Expects : string or function
• Example : <input ref=”inputId” />

Example

<!-- vm.$refs.p will be the HTML DOM element  -->
<p ref="p">hello to program easily</p>

<!-- vm.$refs.child will be the child component instance -->
<child-component ref="child"></child-component>

<!-- When bound dynamically, we can define ref as a callback function, 
passing the element or component instance explicitly -->
<child-component :ref="(el) => child = el"></child-component>

However ref registration timing is very important. Firstly these processes are done after the component render operation. So we can not access it on the initial render. Secondly we can not use $refs inside the template and data binding since it is not reactive. Now we are going to create the base-input component and use ref as follows,

In the above example, we need to call the updateInput method in the onMounted hook. Here the input element is available. We can access them using this.$refs.input. We have to add the input-comp in the index.html like below.

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <script src="https://unpkg.com/vue@next"></script>
  </head>

  <body>
    <div id="app">
      <input-comp />
    </div>

    <script src="src/index.js"></script>
  </body>
</html>

Template Refs in Vue.js – Composition API

We can integrate the two concepts Template Refs and Reactive Refs in the Composition API. Generally we are using $refs to access the component instance/element. But here we can access the component instance/element with the help of reactive ref.

<template>
  <div ref="root">Welcome to ProgramEasily</div>
</template>

<script>
  import { ref, onMounted } from 'vue';

  export default {
    setup() {
      const root = ref(null);

      onMounted(() => {
        // the DOM element will be assigned to the ref after initial render
        console.log(root.value) // <div>Welcome to ProgramEasily </div>
      });

      return {
        root
      }
    }
  }
</script>

In the above example, root is the reactive ref object which returned from the setup function. During the Virtual DOM mount operation, if the V-Node key matches with the ref of the render context, then the component instance/element is assigned to the value of the ref. In detail here,

• V-Node : <div ref=”root”>Welcome to ProgramEasily</div>
• V-Node key : root (ref=”root”)
• ref of the render context : i.e. return from the setup function(const root = ref(null))

Indeed, V-Node key root matches with ref of the render context. So we can access the element after the initial render. We can get the element in the onMounted Lifecycle hook like in the example.

Template Refs – Watching

watch and watchEffect are run before the onMounted Lifecycle hook. But the DOM element will be available in the mounted phase. The result is template ref element not available on the watch operation. Refer the below example, here the root.value is null.

<template>
  <div ref="root">Welcome to ProgramEasily</div>
</template>

<script>
  import { ref, watchEffect } from 'vue';

  export default {
    setup() {
      const root = ref(null);

      watchEffect(() => {
        // called before the DOM is mounted or updated
        console.log(root.value) // => null
      })

      return {
        root
      }
    }
  }
</script>

To solve this problem, Vue.js provides another option flush: 'post. This will execute the watch effect after the DOM element mount/update operation. So that the V-Node key root matches with ref of the render context and we can get the result as follows,

<template>
  <div ref="root">Welcome to ProgramEasily</div>
</template>

<script>
  import { ref, watchEffect } from 'vue';

  export default {
    setup() {
      const root = ref(null);

      watchEffect(() => {
        console.log(root.value) // => <div>...</div>
      }, 
      {
        flush: 'post'
      });

      return {
        root
      }
    }
  }
</script>

References

• https://v3.vuejs.org/guide/component-template-refs.html
• https://v3.vuejs.org/guide/composition-api-template-refs.html#template-refs
• https://v3.vuejs.org/api/special-attributes.html#ref

Summary

• Template refs used to create the references for the element or child component.
• The parent component $refs object, stores the ref reference.
• In the Composition API, Template refs matched to Reactive refs in the Virtual DOM mount operation.
• When we watch Template refs, we have to add flush: 'post to watch the ref after the DOM updated.

The post Template Refs in Vue.js appeared first on Program Easily.

While we create components, we will go step by step procedure to fulfill its requirements. In Vue.js we can derive this as follows,

1. Data observation
2. template compilation
3. mount the component instance to DOM
4. update the DOM based on data

Between the steps, Vue.js provides a predefined function called Life Cycle Hooks. We can add our own logics by calling these life cycle hooks in between the component creations. It will be very helpful to know about Components in Vue3 before moving to this session. Let’s take the deep dive!

Lifecycle hooks in Vue 3

For Example, As per the component creation flow, the created hook will be called after the component instance is created.

Vue.createApp({
  data() {
    return { state: "hello to lifecycle hooks" }
  },
  created() {
    // `this` points to the vm instance
    console.log(this.state) // => hello to lifecycle hooks
  }
})

As shown above, we can use other hooks which are used to be called at different stages of component creation.

Options API vs Composition API

Above all, we can access lifecycle hooks in both options API and composition API. We have to invoke life cycle methods inside the setup function in the Composition API. Option API is available in both Vue.js 2 and 3 whereas composition API is available from Vue.js 3.

Most importantly, beforeCreate and created are not available in composition API. However, we can write it’s logic directly in the setup function since setup is invoked around the created hook.

Note

In Optional API, all lifecycle hooks have this context bound to the instance. So we should not go for arrow functions (e.g. created: () => this.createdCallBack()) since arrow functions bind the parent context to this.

Lifecycle hooks – Options API

• beforeCreate – called after the component instance has been initialized but before data observation.
• created – called after the component instance has been created. Since instance is created we can set up data observation, computed properties, methods, watch/event callbacks. But we can not do DOM operation since the component is not mounted. The $el property is also not available yet.
• beforeMount – called just before the component mounting process.
• mounted – This is an important hook after created hook in the options API. mounted called after the component instance has been mounted. If the root component instance is mounted, then vm.$el will be there in the DOM. But it does not guarantee that all child components have also been mounted.
• beforeUpdate – called at run time when data changes before the DOM is updated. It is a good place to remove manually added event listeners.
• updated – called at runtime after the data changes and DOM patched.
• beforeUnMount – called before a component instance is unmounted.
• unmounted – called after a component instance has been unmounted.
• errorCaptured – called when an error occurs from any child component.
• renderTracked – called when virtual DOM rerender tracked.
• renderTriggered – called when virtual DOM rerender triggered.

Lifecycle hooks Vue 3 Example

Life cycle hooks provide the ways to add their logic at specific stages while creating the components. Moreover in Vue.js 3, they are tree-shakable modules. You can import and use them in your composable logics.

import { onMounted } from "vue";

As shown above, we can get the lifecycle hooks  and use them in our logics at different stages. The full example for all lifecycle hooks shown below,

<template>
  <div>
    <button v-on:click="addToCart">Add to cart</button>
    <p>Cart{{ state }}</p>
  </div>
</template>

<script>
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  onErrorCaptured,
  onRenderTracked,
  onRenderTriggered,
  ref,
} from "vue";

export default {
  setup() {
    onBeforeMount(() => {
      console.log("Component is onBeforeMount!");
    });
    onMounted(() => {
      console.log("Component is mounted!");
    });
    onBeforeUpdate(() => {
      console.log("Component is onBeforeUpdate!");
    });
    onUpdated(() => {
      console.log("Component is Updated!");
    });
    onBeforeUnmount(() => {
      console.log("Component is onBeforeUnmount!");
    });
    onUnmounted(() => {
      console.log("Component is un mounted!");
    });
    onErrorCaptured(() => {});
    onRenderTracked(({ key, target, type }) => {
      console.log("onRenderTriggered!")
      console.log({ key, target, type });
      /* This will be logged when component is rendered for the first time:
    {
      key: "cart",
      target: {
        cart: 0
      },
      type: "get"
    }
    */
    });
    onRenderTriggered(({ key, target, type }) => {
      console.log("onRenderTriggered!")
      console.log({ key, target, type });
      /* This will be logged when component is rendered for the first time:
    {
      key: "cart",
      target: {
        cart: 0
      },
      type: "get"
    }
    */
    });

    let state = ref(0);
    const addToCart = () => {
      state.value += 1;
    };
    return {
      state,
      addToCart,
    };
  },
};
</script>

<style scoped></style>

GitHub Link :

• https://github.com/programeasily/vue-3-basics/blob/main/src/components/HooksExampleComponent.vue

References :

1. https://v3.vuejs.org/guide/instance.html#lifecycle-hooks
2. https://v3.vuejs.org/api/options-lifecycle-hooks.html#lifecycle-hooks
3. https://v3.vuejs.org/guide/composition-api-lifecycle-hooks.html

Summary

In conclusion,

• Firstly vue.js provides predefined function called Life Cycle Hooks.
• Secondly we can access lifecycle hooks in both options API and composition API.
• Life cycle hooks provide the way to add their logics at specific stages while creating the components.

The post Lifecycle hooks in Vue 3 appeared first on Program Easily.

To solve this problem, Vue.js introduced Provide and Inject concepts. Here the parent component provides the dependency to all its children irrespective of how long the component hierarchy is. As the name suggests, the parent component has a provide option and the child component has an inject option. The provide option will provide the data and inject will acquire this data.

Let’s take a deep dive into this with an example. Read Components in Vue3 and Single File Components Vue 3 if you are new to Vue.js components.

Root
└─ Page (<- Use Provide Here ->)
   ├─ App Bar
   └─ Layout
      ├─ Drawer Menu
      └─ Main Floor
         └─ Header Room (<- Use Inject Here ->)
         └─ Content Room
   └─ Footer

Let me take the above example, where we want Page component data in Header room component. We can pass as prop data from Page -> Layout -> Main Floor -> Header Room  components one by one. Alternatively we can use provide/inject here.

Use Provide

Firstly, our goal is to pass Page Component data to it’s inner child Header Room Component without passing as prop data.  So we are using Provide in Page.vue.

Page.vue

<template>
  <div />
  <!-- <AppBar /> 
  // Here we supposed to pass pageProperties
  // to Layout and Layout -> Main Floor -> Header Room
  // But with the help of provide/inject we can directly
  // use this in Header Room component -->
  <Layout />
</template>

<script>
import Layout from "./Layout";
export default {
  components: {
    Layout,
  },
  provide: {
    pageProperties: {
      pageName: "Provide/Inject",
      pageVersion: "1.0.0",
      pageUser: "admin",
    },
  },
};
</script>

Use Inject

Secondly, we will be using inject in HeaderRoom.vue Component to get the data given in Page.vue Component with provide option.

HeaderRoom.vue

<template>
  <div>Page Name : {{ pageProperties.pageName }}</div>
  <div>Page Name : {{ pageProperties.pageVersion }}</div>
  <div>Page Name : {{ pageProperties.pageUser }}</div>
</template>

<script>
export default {
  inject: ["pageProperties"],
};
</script>

The full working example

Note :

Some points to be noted here,

1. Parent component wouldn’t know which child is going to use the provided data.
2. Likewise the child component wouldn’t be aware where the injected data coming from.

Provide And Inject in Vue.js with Composition API

In addition, we can use provide and inject in the composition API also. We have to call both methods inside the setup function.

Provide in setup

We have to import provide function from vue module. The provide function has two parameters,

1. The Property Name (type should be string)
2. The Property Value  (type can be anything)

we are updating  Page.vue component as follows,

Page.vue

<template>
  <div />
  <!-- <AppBar /> 
  // Here we supposed to pass pageProperties
  // to Layout and Layout -> Main Floor -> Header Room
  // But with the help of provide/inject we can directly
  // use this in Header Room component -->
  <Layout />
</template>

<script>
import { provide } from "vue";
import Layout from "../provideinject/Layout";
export default {
  components: {
    Layout,
  },
  setup() {
    provide("pageProperties", {
      pageName: "Provide/Inject",
      pageVersion: "1.0.0",
      pageUser: "admin",
    });
  },
};
</script>

Inject in setup

We have to import the inject function from the vue module. The inject function has two parameters,

1. The property Name
2. Default value (optional)

we are updating  HeaderRoom.vue component as follows,

HeaderRomm.vue

<template>
  <div>Page Name : {{ pageProperties.pageName }}</div>
  <div>Page Name : {{ pageProperties.pageVersion }}</div>
  <div>Page Name : {{ pageProperties.pageUser }}</div>
</template>

<script>
import { inject } from "vue";
export default {
  setup() {
    let pageProperties = inject("pageProperties");
    return {
      pageProperties,
    };
  },
};
</script>

The full working example

Provide And Inject in Vue.js with Reactivity

In the above example, pageProperties will not be reactive by default. Moreover, They are not reactive by nature. We have to use ref/reactive with provide to make it reactive.

Note that, In the below example we are using reactive with provide to make pageProperties reactive. Here updateVersion method is provided to all it’s children with pageProperties.

Page.vue

<template>
  <div />
  <!-- <AppBar /> 
  // Here we supposed to pass pageProperties
  // to Layout and Layout -> Main Floor -> Header Room
  // But with the help of provide/inject we can directly
  // use this in Header Room component -->
  <Layout />
</template>

<script>
import { provide, reactive } from "vue";
import Layout from "./Layout";
export default {
  components: {
    Layout,
  },
  setup() {
    let pageProperties = reactive({
      pageName: "Provide/Inject",
      pageVersion: "1.0.0",
      pageUser: "admin",
    });
    provide("pageProperties", pageProperties);
    provide("updateVersion", () => {
      pageProperties.pageVersion = "2.0.0";
    });
    return {
      pageProperties,
    };
  },
};
</script>

After that, we are going to update the version from HeaderRoom Component with the help of inject directly.

HeaderRoom.vue

<template>
  <div>
    <button @click="updateVersion">Update Parent Version</button>
  </div>
  <div>Page Name : {{ pageProperties.pageName }}</div>
  <div>Page Name : {{ pageProperties.pageVersion }}</div>
  <div>Page Name : {{ pageProperties.pageUser }}</div>
</template>

<script>
import { inject } from "vue";
export default {
  setup() {
    let pageProperties = inject("pageProperties");
    let updateVersion = inject("updateVersion");
    return {
      pageProperties,
      updateVersion,
    };
  },
};
</script>

So we can update parent component data(pageProperties version) from the child component using provide and inject concepts in Vue.js effectively.

The full working example

Global Provider – Provide Application API

However, we can use provide as a global provider to all components. The provided data would be injected to all it’s components within the application. It’s an alternative way for global properties in Vue.js.

Let me show you the example below,

index.js

const app = Vue.createApp({});
// Global Provider
app.provide("appProperties", {
  user: "admin",
  appVersion: "1.0.0"
});
// Page Component where contains content component
app.component("Page", {
  template: `<Content />`
});
// Content component where inject used to get
// global properties
app.component("Content", {
  inject: ["appProperties"],
  template: `
    <div>User Name : {{ appProperties.user }}</div>
    <div>Version : {{ appProperties.appVersion }}</div>
  `
});

index.html

<div id="app">
      <Page />
</div>

Here the appProperties is provided to all components within the application. We got the data in the Content component using inject.

The full working example

Conclusion

• In conclusion, Provide and inject makes ease of data communication between parent and it’s child components.
• Provide and Inject are not reactive by nature. But we can make it reactive with the help of reactive/ref.
• We can use provide as global provider instead of global properties in Vue.js

The post Provide And Inject in Vue.js appeared first on Program Easily.