Vue.js 2 Cookbook

How to do it...

In a new folder, create a new npm project (you can use npm init -y or yarn init -y).

Inside the folder, create a new directory named src and put a file inside it, called MyComp.vue. Let the file contain the following code:

<template>  <div>    Hello {{name}}!  </div></template><script>export default {  data () {    return {      name: 'John',      name: 'Jane'    }  }}</script>

We can already spot a problem--the John name property will be overwritten by the later property, Jane, with the same key. Let's pretend that we didn't notice this and put the component inside a web page. For this, we need another file, named index.js, in the src directory. Write the following code inside it:

import Vue from 'vue'import MyComp from './MyComp.vue'new Vue({ ...