---
title: How to create components in vue.js – ReadyMadeCode
description: 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 Compone
---

[Start Coding with Codelab | Jaeves AI](https://jaeves.com/codelab)

# [How to create components in vue.js – ReadyMadeCode](https://jaeves.com/codelab/how-to-create-components-in-vue-js)

 Written by [Admin](https://jaeves.com/codelab/author/admin) | Oct 12, 2023, 7:25:14 PM

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**](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>
```

Copy

### 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'
});
```

Copy

### Step 4 : Passing Data to Component

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

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

Copy

### Step 5 : Calling Functions in Component

```
Vue.component('testcomponent',{
   template : '<div v-on:mouseover = "changename();" v-on:mouseout = "originalname();"><h1>This is the data How to create components in vue.js 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'
});
```

Copy

## 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>
```

Copy

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](https://vuejs.org/v2/guide/components-registration.html)here.

##### Recommendation

[How to create instances in Vue.js](https://jaeves.com/codelab/how-to-create-instances-in-vue-js/)

For more [Vue.js Tutorials visit Vue.js page](https://jaeves.com/codelab/tag/vue-js/).

[View full post](https://jaeves.com/codelab/how-to-create-components-in-vue-js)

```json
{
  "@context" : "http://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Admin"
  },
  "dateModified" : "2023-10-12T19:25:14.387Z",
  "datePublished" : "2023-10-12T19:25:14Z",
  "headline" : "How to create components in vue.js",
  "image" : {
    "@type" : "ImageObject",
    "height" : 60,
    "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png",
    "width" : 60
  },
  "mainEntityOfPage" : "https://jaeves.com/codelab/how-to-create-components-in-vue-js",
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "height" : 60.0,
      "url" : "https://139767802.fs1.hubspotusercontent-eu1.net/hubfs/139767802/logos/jaeves-logo-230907.png",
      "width" : 185.625
    },
    "name" : "Codelab"
  }
}
```