Vue.js Components What are components and how to define components?

Example

Components in Vue are like widgets. They allow us to write reusable custom elements with desired behavior.

They are nothing but objects which can contain any/all of the options that the root or any Vue instance can contain, including an HTML template to render.

Components consist of:

• HTML markup: the component's template
• CSS styles: how the HTML markup will be displayed
• JavaScript code: the data and behavior

These can each be written in a separate file, or as a single file with the .vue extension. Below are examples showing both ways:

.VUE - as a single file for the component

<style>  
    .hello-world-compoment{  
        color:#eeeeee;  
        background-color:#555555; 
    }  
</style>  

<template>
    <div class="hello-world-component">
        <p>{{message}}</p>
        <input @keyup.enter="changeName($event)"/>
    </div>
</template>

<script>
    export default{            
        props:[ /* to pass any data from the parent here... */ ],   
        events:{ /* event listeners go here */},
        ready(){
            this.name= "John";
        },
        data(){
           return{
              name:''
           }
        },
        computed:{
            message(){
                return "Hello from " + this.name;
            }
        },
        methods:{
            // this could be easily achieved by using v-model on the <input> field, but just to show a method doing it this way.
            changeName(e){
                this.name = e.target.value;
            }
        }  
    }
</script>  

Separate Files

hello-world.js - the JS file for the component object

export default{
    template:require('./hello-world.template.html'),
    props:[ /* to pass any data from the parent here... */ ],  
    events:{ /* event listeners go here */ },
    ready(){
        this.name="John";
    },
    data(){
        return{
            name:''
        }
    },
    computed:{
        message(){
            return "Hello World! from " + this.name;
        }
    },
    methods:{
        changeName(e){
            let name = e.target.value;
            this.name = name;
        }
    }
}  

hello-world.template.html

<div class="hello-world-component">
    <p>{{message}}</p>
    <input class="form-control input-sm" @keyup.enter="changeName($event)">
</div>  

hello-world.css

 .hello-world-compoment{  
    color:#eeeeee;  
    background-color:#555555; 
}    

These examples use es2015 syntax, so Babel will be needed to compile them to es5 for older browsers.
Babel along with Browserify + vueify or Webpack + vue-loader will be required to compile hello-world.vue.

Now that we have the hello-world component defined, we should register it with Vue.

This can be done in two ways:

Register as a global component
In the main.js file (entry point to the app) we can register any component globally with Vue.component:

import Vue from 'vue'; // Note that 'vue' in this case is a Node module installed with 'npm install Vue'
Vue.component('hello-world', require('./hello-world');  // global registeration

new Vue({
    el:'body',

    // Templates can be defined as inline strings, like so:
    template:'<div class="app-container"><hello-world></hello-world></div>'
});  

Or register it locally within a parent component or root component

import Vue from 'vue'; // Note that 'vue' in this case is a Node module installed with 'npm install Vue'
import HelloWorld from './hello-world.js';  

new Vue({
    el:'body',
    template:'<div class="app-container"><hello-world></hello-world></div>",

    components:{HelloWorld}  // local registeration
});  

Global Components can be used anywhere within the Vue application.

Local Components are only available for use in the parent component with which they are registered.

Fragment component
You may get a console error telling you that you can't do something because yours is a fragment component. To solve this sort of issue just wrap your component template inside a single tag, like a <div>.