How to create components in vue.js

Sometimes we needs to create reusable html in our website like header, footer, sidebars, breadcrumbs etc. So, this can be done in Vue.js. In Vue.js Components are the custom elements, which can be reused in HTML template. In this tutorial we will learn How to create components in vue.js.

Step 1 : Install Vue.js with CDN

Include this CDN between head tag.

https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js

Step 2 : Create Custom HTML Template.

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"></script>
   </head>
   <body>
      <div id = "component_test">
         <testcomponent></testcomponent>
      </div>
      <script type = "text/javascript" src = "js/vue_component.js"></script>
   </body>
</html>

Step 3 : Create a Component file vue_component.js

Vue.component('testcomponent',{
   template : '<div><h1>This is the component</h1></div>'
});

var vm = new Vue({
   el: '#component_test'
});

Step 4 : Passing Data to Component

Vue.component('testcomponent',{
   template : '<div><h1>This is the data {{name}} in component</h1></div>',
   data: function() {
      return {
         name : "Chetan"
      }
   }
});

var vm = new Vue({
   el: '#component_test'
});

Step 5 : Calling Functions in Component

Vue.component('testcomponent',{
   template : '<div v-on:mouseover = "changename();" v-on:mouseout = "originalname();"><h1>This is the data {{name}} in component</h1></div>',
   data: function() {
      return {
         name : "Chetan"
      }
   },
    methods:{
      changename : function() {
         this.name = "Rohit";
      },
      originalname: function() {
         this.name = "Chetan";
      }
   }
});

var vm = new Vue({
   el: '#component_test'
});

Creating Dynamic Components in Vue.js

If we required to add dynamic components in vue.js. We can do this using below method.

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <component v-bind:is = "view"></component>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               view: 'component1'
            },
            components: {
               'component1': {
                  template: '<div><span style = "font-size:25;color:red;">Dynamic Component</span></div>'
               }
            }
         });
      </script>
   </body>
</html>

We created a dynamic component component1 and attribute v-bind:is in component tag and assigns the variable view and its value defined when created Instance of Vue.

Now, you can create components in vue.js. You can read details of Vue.js Components here.

Recommendation

How to create instances in Vue.js

For more Vue.js Tutorials visit Vue.js page.

If you like this, share this.