/ Web Design & Development

Step by Step Guide on How to Create Vue JS - Components

Md. Masumur Rahman

Md. Masumur Rahman

I am Md.Masumur Rahman, From the age of twenty I knew that design was my passion. I specialize in designing and developing user interfaces and digital products.

Read More
Step by Step Guide on How to Create Vue JS - Components

Vue Components are one of the important features of VueJS that creates custom elements, which can be reused in HTML.

Let’s work with an example and create a component, that will give a better understanding on how components work with VueJS.

Example:

<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "component_test">
<testcomponent></testcomponent>
</div>
<div id = "component_test1">
<testcomponent></testcomponent>
</div>
<script type = "text/javascript" src = "js/vue_component.js"></script>
</body>
</html>
vue_component.js
Vue.component('testcomponent',{
template : '<div><h1>This is coming from component</h1></div>'
});
var vm = new Vue({
el: '#component_test'
});
var vm1 = new Vue({
el: '#component_test1'
});

In the .html file, we have created two div with id component_test and component_test1. In the .js files shown above, two Vue js instances are created with the div ids. We have created a common component to be used with both the view instances.

To create a component, following is the syntax.

Vue.component('nameofthecomponent',{ // options});

Once a component is created, the name of the component becomes the custom element and the same can be used in the Vue instance element created, i.e. inside the div with ids component_test and component_test1.

In the .js file, we have used a test component as the name of the component and the same name is used as the custom element inside the divs.

Example:

<div id = "component_test"><testcomponent></testcomponent></div>
<div id = "component_test1"><testcomponent></testcomponent></div>

In the component created in the .js file, we have added a template to which we have assigned a HTML code. This is a way of registering a global component, which can be made a part of any vue instance as shown in the following script.

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

On execution, the same will be reflected in the browser.

The components are given the custom tag. i.e <testcomponent></testcomponent>However, when we inspect the same in the browser, we will not notice the custom tag in plain HTML present in the template as shown in the following screenshot.

We have also directly made the components a part of vue instance as shown in the following script.

var vm = new Vue({
el: '#component_test',
components:{
'testcomponent': {
template : '<div><h1>This is coming from component</h1></div>'
}}});

This is called local registration and the components will be a part of only the vue instance created.

So far, we have seen the basic component with the basic options.