DEV Community: MoZardi

Local Web Vue Component

MoZardi — Sun, 30 Dec 2018 20:50:41 +0000

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

Global Web Vue Component

MoZardi — Wed, 24 Oct 2018 08:39:13 +0000

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 blocks of code that can be reused over and over again. By creating the components , you can eliminate the need to write the code multiple times, and it helps your application become more modular and easier to work with.

Component syntax :

Vue.component(tagName, options);

tagName represent the name of the component and takes a String value.
options represent a function or an options object, So the object contains a bunch of options that might define markup script by the template property, and have another options or properties like data, methods, props etc.

Defining the component :

To create a vue.js component you must first register it.
Here is how registering a Vue.js component looks:

// Register vue component before creating the Vue instance
// template property holds the HTML elements to executed once component called
  Vue.component('message', { 
    template: '<p> Hey there, I am a re-usable component </p>'
   });


// Create the root vue instance after creating the vue components
let app = new Vue({
el: '#app-vue'
});

Using the component :

To use a vue.js component you must call or invoke the component by using the custom element named the component name.

Calling Component syntax :

<tagName></tagName>

So let's use it!

  <div id="vue-app">
      <message></message>
  </div>

The output of the code :

Hey there, I am a re-usable component

Now, another example for web vue components :

First, Regitering the component :

// Register a global component named movie-card html tag
Vue.component('movie-card',{
// the props (defines the attributes of the movie-card html tag)
  props:['image','title'],

// the template (defines the inner html of the component)
template: `
<div>
    <img width="100" v-bind:src="image" v-bind:alt="title"/>
    <h2> {{ title }} </h2>
  </div>
`
});

// Root vue instance 
new Vue({
      el: '#vue-app'
 });

Note that: The attributes of props option, we can access to it inside the template option by using the directive v-bind or by mustashue style {{}}.

In other words:

If we use the props as value of attribute of the Html element, then we must use the v-bind directive on that attribute.
If we use the props as value of any Html elements, then we must use the Mustashue style {{}} inside Html elements.

Second, Invoking the component:

<div id="vue-app">

 <movie-card
 title="Mo Salah"       
 image="http://www.arabnews.com/sites/default/files/styles/n_670_395/public/2018/06/04/1210816-177415191.jpg?itok=rgY5P4oi">
 </movie-card>

</div>

As you can see, you can use the registered component like an HTML element.

Lastly, third example for web vue components :

We will use the Materialize CSS framework with VueJS framework to make palyer cards.

link: Materialize CSS

<div class="container" id="vue-app">
      <div class="row">

   <player-card name="Mo Salah"
                bio="Professional Footballer for Liverpool FC and Egypt."             
                twitter="https://twitter.com/MoSalah" 
                image="https://d3j2s6hdd6a7rg.cloudfront.net/v2/uploads/media/
                       default/0001/68/thumb_67083_default_news_size_5.jpeg">
    </player-card>


   <player-card name="Cristiano Ronaldo" 
                bio="Professional Footballer for Juventus FC and Portuguesa."                                       
                twitter="https://twitter.com/cristiano" 
                image="https://d3j2s6hdd6a7rg.cloudfront.net/v2/uploads/media/
                       default/0001/68/thumb_67083_default_news_size_5.jpeg">
    </player-card>


   <player-card name="Neymar da Silva Santos" 
                bio="Professional Footballer for Paris Saint-Germain FC and Brasileira." 
                twitter="https://twitter.com/neymarjr" 
                image="https://images.cdn.fourfourtwo.com/sites/fourfourtwo.com/
                files/styles/image_landscape/public/neymarcropped
                _1dddbvc0xb8gt18uqwcscs9y4r.jpgitok=PVUv2vle&c
                =87b6d99828d88c1b8ffe17a08d24fc7d">
    </player-card>     

    </div>
  </div>

So, let's register a component named player-card , and then assign 4 props value named name , image , bio , twitter to pass data from parent.

Also, initial the template option which is a string of HTML which is displayed where the component is located in the HTML document.

Remember that binds the 4 props value from parent to template option.


// Register component before instantiating the Vue instance

 Vue.component('player-card', {
      props: ['name', 'image', 'bio', 'twitter'],
      template: `
    <div class="col s12 m7 l4">
      <div class="card">
        <div class="card-image">
          <img v-bind:src="image" height="180px">
        </div>
        <div class="card-content">
            <span class="card-title red-text">  
              <div class="chip">
              {{name}}
              </div>
          </span>
          <p> {{bio}} </p>
        </div>
        <div class="card-action purple darken-4 ">
          <a :href="twitter" target="_blank" class="blue-text darken-4">Twitter Account</a>
        </div>
      </div>
    </div>
      `
    });


// Vue root instance
    let app = new Vue({
      el: '#vue-app',
    });

Here's the result of code :

Recap : The Web Vue Components are giving you the capability to declare your HTML elements once and reuse them on multiple pages. Yeah! Those are the reusable chunks of code.
So, Vue Components make your code more dynamic.

Also, Vue Components can be used in different vue instances, So when you want to use block of code in two or three vue instances you can do it by using vue components, Instead of write block of code in tamplate option on each vue instances, we write once in one vue component, then called in vue instances scope.

Reference: Vue-component