Local Web Vue Component

Components in Vue

Web components in web applications are blocks (tiny reusable chunks) that encapsulate markup, HTML template, CSS, and Javascript.

Vue.JS web components are just re-usable piece of code or template that we can use in different vue instances.

Vue.JS Web components are custom HTML elements that can be used and reused in web apps and web pages.

Actually not just local component but also global component.

I will show you how we can create or register components globally and locally, as well as how to nest them in other components.

For large-scale applications, we split our code up into different components and then just use those components to show them to browser when we need them.

For instance :

Vue Web Component Tree

We have 3 components which are Header, Article and Footer components.

So, We can nest those three components in the root component , likewise we could also have a Login component, Side Nav component and Toast component and then nest those in the Header component.

Also, we have three child components which are Carousel component, Card component and Form component , and then nest those in the parent component which is Article component.

Last component, we can nest Link component to the Footer component.

So, Why would we do different vue web component ?

Well, Imagine we have an article component which is used in different sections of the website, so rather than code that maybe four or five times in different areas of the website which is code it only once in its own component and then nest it four or five times whatever it's needed.

Example :

Global vue web component

Let's use the Vue-CLI which is the Standard Tooling for Vue.js Development.

Vue CLI version 3

Let's create a new vue web component file called fruit.vue
So, Inside the script tag we create an array of items (array of strings) and called fruits , thus has a data set called fruits .

Inside template tag we create an unordered list which is use the v-for directive for iterating over an array as a list.

 fruit.vue file 

<template>

  <ul>
    <li v-for="fruit in fruits">  {{ fruit }} </li>
  </ul>

</template>

<script>
export default { 
  data () {
    return {
      fruits: ['Apple','Orange','Avocado','Coconut','Kiwi','Mango']
    }
  }
}
</script>

<style>

</style>

Note that : v-for directive used to render list of data/content to the user or looping over data sets.

After we created the vue web component file, we must go to the main.js file to register the global vue web component.

So, Inside the main.js file do the following :
First of all, Import the Vue web component file that you have created.
Then, Register the Vue web componet as globally.
Lastly, Now you can use it or nest it in any other Vue web component or in the root component.

// main.js file

import Vue from 'vue'
import App from './App.vue'

// Import the Vue web component file
import Fruits from "./components/fruit.vue";


// Register global component 
Vue.component('fruits', Fruits); 

new Vue({
  el: "#app",
  components: { App },
  template: "<App/>"
});

Right now we have successfully registered the componet (fruit.vue) globally.

So, we can nest the component (fruit.vue) in the root component (App.vue) after we registered in the main.js file.

So, Go to the root component which is App.vue file, and insert the global vue web component as custom tag.

<template>

    <!-- insert the fruit tag that represent the global vue web component -->     
    <fruits></fruits>

</template>

<script>

export default {
  name: "App",

};
</script>

<style>

</style>

So, the result will be listing the fruits as globally component with CLI.

• Apple
• Orange
• Avocado
• Coconut
• Kiwi
• Mango

Same example of global vue web component without using the Vue-cli :

// define component variable 
let fruitComponent = Vue.extend({
    data() {
    return {
    fruits: ["Apple", "Orange", "Avocado", "Coconut", "Kiwi", "Mango"]
    };
  },
    template: `
    <ul>
    <li v-for="fruit in fruits">{{ fruit }}</li>
    </ul> 
    `
});

// register global component
Vue.component('fruits' , fruitComponent);

// create a root instances 
let app = new Vue({
    el: '#vue-app'
});

let app2 = new Vue({
    el: '#vue-app2'
});

Note that we have 2 vue instances, so the global vue web component we can use it in any scope of vue instances.

Note that Any global vue component we registered outside any vue instances to be used in any vue instances scope.

Used the component name as tag inside template of vue scope

<!-- Scope of the first vue instance with id equal to vue-app -->
<div id="vue-app">

     <fruits></fruits>

</div>


<!-- Scope of the second vue instance with id equal to vue-app2 -->
 <div id="vue-app2">

      <fruits></fruits>

 </div>

The result : The global vue component will be work in each of scope of vue instances.

So, When we register a component globally, we can use it in any vue instance, but if we register it locally, we can use it just in specific vue instance.

So, the result will be listing the fruits as globally component without CLI.

• Apple
• Orange
• Avocado
• Coconut
• Kiwi
• Mango

Example :

Local vue web component

Let's use the Vue-CLI to create a local vue web component.

So, Let's create a vue web component file called fruit.vue as done before.

 fruit.vue file 

<template>

  <ul>
    <li v-for="fruit in fruits">  {{ fruit }} </li>
  </ul>

</template>

<script>
export default { 
  data () {
    return {
      fruits: ['Apple','Orange','Avocado','Coconut','Kiwi','Mango']
    }
  }
}
</script>

<style>

</style>

So, after we created the vue web component file, we don't need to go to the main.js file to register the vue web component, because we don't register it globally.

So, Inside any other Vue web component file do the following :
First of all, Again import the Vue web component file that you have created.
Then, Register the Vue web componet as locally via use components: { } option inside Export default object .
Lastly, Now you can use it or nest it in the component that we registered it locally.

Note that inside the Export default object we use the option called components as follows :

 components: {
    ComponentName : ImportingName  
  }

Let's go to the root component which is App.vue file, and register the local vue web component.

<template>

  <fruits></fruits>

</template>

<script>

//Import the Vue web component file 
import Fruits from "./components/fruit.vue";


// Register the local component inside components option 
export default {
  name: "App",
  components: { 
    'fruits': Fruits
  }
};
</script>

<style>

</style>

Note that in local component we can use that component in only the root component App.vue file because we registerd as locally, Any other component cannot use it.

So, the result will be listing the fruits as locally component with CLI.

• Apple
• Orange
• Avocado
• Coconut
• Kiwi
• Mango

Now, Let's create same example of local vue web component, but without using the Vue-cli :

// define component variable 
const fruity = {
    data() {
    return {
    fruits: ["Apple", "Orange", "Avocado", "Coconut", "Kiwi", "Mango"]
    };
  },
    template: `
    <ul>
    <li v-for="fruit in fruits">{{ fruit }}</li>
    </ul> 
    `
};


// create a root instance and register the local component inside it 
let app = new Vue({
    el: '#vue-app',
    components:{ 
        fruity
     }
});

Now, Use the component name as tag inside template of vue scope

<!-- Scope of the vue instance with id equal to vue-app -->
<div id="vue-app">

     <fruity></fruity>

</div>

So, the result will be listing the fruits as locally component without CLI.

• Apple
• Orange
• Avocado
• Coconut
• Kiwi
• Mango

Here another example of local vue web component without using the Vue-cli :

// define component body outside vue instance 
const Sidebar = {
  template: '<h3>Sidebar Section </h3>'
}; 

const Navbar = {
    template: `<h4>Navbar section</h4>`
};


// create first vue instance 
let app = new Vue({
    el: '#vue-app',
    components:{      // register local component
        Sidebar,       
        Navbar,
        user-name: {   // define and register local component inside vue instance   
            props:['name'],
            template:`<h4> My name is {{name}}</h4>`
        }

    }
});

// create second vue instance 
let app2 = new Vue({
    el: '#vue-app2',    // Not register any local component
});

Now, Use the component name as tag inside template of vue scope

<!-- Scope of the first vue instance with id equal to vue-app -->
<div id="vue-app">

        <!-- Here local components will be render it -->  
        <sidebar></sidebar>
        <Navbar></Navbar>
        <user-name name="Noor"></user-name>

</div>


<!-- Scope of the second vue instance with id equal to vue-app2 -->
 <div id="vue-app2">

      <!-- Here local components will not be render it -->  
     <sidebar></sidebar>
     <Navbar></Navbar>
     <user-name name="Noor"></user-name>

 </div>

So, the result will be displaying as locally component without CLI.

The result : The local vue component will be work only in the first scope of vue instance, and the second scope of vue instance will not work because we have not register the local components inside the second vue instance.

So, if we register a component locally, we can use it just in specific vue instance.

So, if we have 2 vue instances, and we want to use component in the 2 vue instances , we must register it globally, to share that component.
But, if we want to use the componet just once and don't share it, we register it as locally.

Recap : The Vue Web Component consists of Two main ways to register components which are globally or locally :

• Globally with Vue-Cli.
• Globally without Vue-Cli.
• Locally with Vue-Cli.
• Locally without Vue-Cli.

Also, Last thing the way we used in Vue-Cli which is we create the .vue files called Single File Components or Single Page Components.

Past article : Global Web Vue Component