Vue.js 2 Cookbook

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 instance:

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

Also, we need some HTML to actually place it in the page:

 <div ...