Local Web Vue Component 
Tags: vue, javascript, webdev, beginners
Published: 2018-12-30 20:50:41

---
title: Local Web Vue Component 
published: true
description: Local web vue component which used to re-use block of code many times as custom tags. 
tags: #vue,#javascript,#webdev,#beginners
---

##Components in Vue


![alt text](https://s3.amazonaws.com/coursetro/posts/134-full.png
)

**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

![Nesting Components](https://i.ibb.co/4j3Yb9L/nesting-component.png)

 
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 ](https://cli.vuejs.org)


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.

```html 
 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. 


```javascript
// 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.

```html

<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 : 

```javascript


// 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 
```html

<!-- 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. 

```html 
 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 : 
```html
 components: {
    ComponentName : ImportingName  
  }
```

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

```html

<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 : 


```javascript


// 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 
```html

<!-- 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 :

 
```javascript 

// 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 
```html


<!-- 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](https://dev.to/moxardi/global-web-vue-component-d0d
)