Vue Components 101

Vue Components are an amazing way to expand html with reusable code. By using components you can use custom html that makes the code much more legible. I have created a few component examples in my VueJS repository (mainly based on Jeffrey Way’s work at Laracasts).

Component Advantages

So why are Vue Components so cool? Why should you use them? What makes the use of them better for us frontend developers?

  • They are global and can be reused as many times as you want. Meaning you can call them in html as many times as you need to call them.
  • Great way to organize your frontend code in a nested tree structure. With let’s say headers, navbars, footers that can be loaded inside page, post or product components with other components like modals
  • Allow you to have template, JavaScript and styling in one .vue file
  • Extends you Vue instance*
  • Better to have data per app element in its own area then having all in one Vue instance. Otherwise things would get unruly real quick

* Data should be a function so it is not shared across Vue component instances


Message Component

The Vue component project in the repo I will be using is the component that creates a basic message. It shows a basic message with the option to hide it with a click. This component uses a .js file and html file that loads the data. We do not use a Vue file here yet.

Vue Components defined

As said Vue Components are new Vue instances that can use the same options as a new Vue instance. They allow you to use:

  • clean reusable code
  • expand html
  • custom html tags

Vue Component Initiation

A Vue component always must be registered before the Vue instance itself. So we could as we do in this example start with

Vue.component('message', {
  props: ['title', 'body'],
  data() {
    return {
    isVisible: true
 in main.js The component is called message and has the following properties inside an array:
  • title
  • body

These are referenced later in the template. Using these properties you can override message title and message body in the actual html. This way you can also use one component with multiple html tags to manipulate. No need to create two in this case.

Vue Data

The data option object here returns boolean true for isVisible.This is the function attached to the v-show directive in the Vue template.

NB Most of the options that can be passed into the Vue constructor can be used in a component, with one special case: data must be a function

Vue Template

The Vue object option is where you add all the html that will be used to replace / expand upon in the actual index.html or other html document. It is the view in the Vue’s MVVM stack. It is also where you call the component properties you defined earlier:

template: `
    <article class="message" v-show="isVisible">
     <div class="message-header">
     <!-- @click is a short version of v-on:click and you can add a method to be called -->
     <button class="delete" @click="hideModal" aria-label="delete"></button>
     <div class="message-body">

There is a lot of things going on here. The template data is put between backticks. There we add the actual message html. We use the v-show directive to show or hide the message based upon a function called later in the data option.

The button added has a v-on directive to trigger an event using the hideModal method called upon later.

You also see title and body called using moustache brackets. That way the message as loaded in the html will be loaded there when the html for message is replaced.

Vue Methods

The method we use here is hideModal. As mentioned it will be triggered when the button is called using v-on. And that will make the function isVisible attached to v-show false and thereby hiding the message box:

methods: {
    hideModal() {
      this.isVisible = false;

Vue Initiation

So as stated we finally call Vue itself using:

new Vue({
  el: '#root'


The actual html manipulated by the component is very short and sweet:

<!DOCTYPE html>
    <link rel="stylesheet" type="text/css" href="">
    <style type="text/css" media="screen">
        body {padding-top:40px;}
<div id="root" class="container">
    <message title="Hello World" body="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "></message>
    <script src=""></script>
    <script src="./js/main.js" type="text/javascript" charset="utf-8" async defer></script>

It loads Vue from a CDN, Bulma CSS and our Vue component using main.js. As you can see Vue is called before the component of course. What you should also see is that root is added as id to mark the area where Vue will work and that message title and body are added. The latter two are newly created html tags as we mentioned can be done with Vue. Making the html all the clearer to read.

Tagged in : Tagged in :
Jasper Frumau

Jasper has been working with web frameworks and applications such as Laravel, Magento and his favorite CMS WordPress including Roots Trellis and Sage for more than a decade. He helps customers with web design and online marketing. Services provided are web design, ecommerce, SEO, content marketing. When Jasper is not coding, marketing a website, reading about the web or dreaming the internet of things he plays with his son, travels or run a few blocks.