Vuejs - Components - Basic Introduction Posted on January 05, 2016

What are Components in Vue?

A component in Vue is a reusable piece of html/css/javascript that we can call numerous times within our application. The component can have it's own properties, methods and looks.

This is pretty awesome as it allows us to create some nice reusable components and with a few html tags call the entire component.

Introducing component templates

A component templates is what makes up the component itself. This is the markup with html and vue combined. Vue offers numerous ways to define component templates, but I want to start out with the simplest example.

In order to start our template for Vue we will be starting off with a new html tag. We will start with a <template> tag. This will tell Vue that whatever is wrapped inside of this template tag is to be parsed as part of the template itself (which we will define later).

Let's start off with a super basic component template.

<template id="hello">
    <p>
        Hello World!
    </p>
</template>

Well, I did say that this was a basic example :)

If we are to break this template down it will create a paragraph tag with the words "Hello World!" inside of them.

Now this isn't the only thing that we need to do. As I mentioned there is a ton of different ways that we can define our Vue components. To keep things simple in our javascript we are going to tell Vue that we have a new component. We are also going to name this component "hello-world". You can definitely have your template and component named the same, I just wanted to show the example.

new Vue({
    el: '#vueApp',
    components: {
        'hello-world': {
            template: '#hello'
        {
    }
});

So whenever we type in the following html tag Vue will take that tag and replace it with our component.

<hello-world></hello-world>

Working Example

Here you can find a working example of the code above via Codepen: http://codepen.io/tutelagesystems/pen/qbrBbR

Next Steps

Pretty awesome so far? Well, maybe not. But in our next post we will start to talk about the power of these components and how to get data to them.

Share this post