Components in Vue Js

In this tutorial we will get to know all about Components.

Components

  • This is one of the important features of VueJS.
  • It is single, independent units of an interface, which have their own markup, state, and style.
  • It creates custom elements, which can be reused in HTML.

Use of Components

Components can be used multiple times in our project so components are nothing but reusable blocks of code

We can define Vue Components in following ways.

new Vue({
/* options */
})
Vue.component('component-name', {
 /* options */
})

By using local components: components that are accessible by a specific component, and not available elsewhere.

.vue files, also called Single File Components.

When application are not Single Page Application, we can use the standard way by using new Vue() or Vue.component() and use Vue.js in some pages or Vue is also used in all pages but the server is rendering the layout, and serve the HTML to the client, which then loads the application we build.

It is more convenient to use Single File Components in Single Page Application, where its Vue that builds the HTML.

We initiate vue by mounting it on DOM element.The component that are initialized with new Vue() has no tag name, hence it is main container component.

new Vue({ el: '#component1' })

In the application, other components are initialized using Vue.component().

vuecomponent.html

html>
   <head>
      <title>Vue Components Demo</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "component1">
         <componentdemo></componentdemo>
      </div>
      <div id = "component2">
         <componentdemo></componentdemo>
      </div>
      <script type = "text/javascript" src = "js/vue_component.js"></script>
   </body>
</html>

vue_component.js

Vue.component('componentdemo',{
    template : '<div><h1>This is the demo of component in Vue</h1></div>'
 });
 var v = new Vue({
    el: '#component1'
 });
 var v1 = new Vue({
    el: '#component2'
 });

The two div with id component1 and component2 are created in .html file. In .js file two Vue instances are created and common component are created that is to be used with both the vue instances.

The following syntax is used to create component:

Vue.component('name of the component',{ // options});

The two div with id component1 and component2 are created in .html file. In .js file two Vue instances are created and common component are created that is to be used with both the vue instances.

The following syntax is used to create component:

Vue.component('name of the component',{ // options});

The name of the component becomes the custom element once a component is created, and the same can be used inside the div with ids component1 and component2.

We have used component demo as the name of the component and the same name in the .js file, is used as the custom element inside the divs.

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

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

The resultant output in browser is:

Result in Browser

When we inspect this in browser, the custom tag which we used are in plain HTML.

Inspect in browser

Components are made part of Vue instance directly. This is called Local Registration. And this component will be only part of vue instance created.

var v = new Vue({
    el: '#component1',
    components:{
      ‘componentdemo’ : {
         template: '<div><h1>This is the demo of component in Vue</h1></div>'
      }
   }
 });

Building Blocks of Components

  • el is initialized using a new Vue({}) & used in only root components and identifies the DOM element on which the component will be mounted.
  • The template is where we can set up the component template. This will be responsible for the output generated by the component.