Creating and registering a component

The first step in dealing with components is to create one. Once the component is registered, we need to tell a Vue instance about it so that it can use the component. In this recipe, you will build your first component.

Getting ready

In this recipe, we will not use any particular knowledge. If you're starting off, my only suggestion is to take a look at the recipes in the first chapter.

How to do it...

Writing your first component will be a snap. You will build a lightbulb!

Here's the relevant code:

Vue.component('light-bulb', { 
  template: ` 
  <div class='light-bulb'> 
    <p>
Eureka!</p> 
  </div> 
  ` 
})

The little quote sign just after template--`--is in reality a back tick. It doesn't exist in all the keyboards; if you don't find it in yours, you will have to copy and paste it. It's part of ES6 syntax, and it tells the browser (or transpiler) that the string may span more than one line.

To use our component, we need our usual Vue...