Vue.js 2 Design Patterns and Best Practices

Creating a TodoList

Let's now create a TodoList.vue component inside src/components folder. This is the component that we will be testing, and we'll slowly add more features to it:

<template>  <div>    <h1>Todo List</h1>    <ul>      <li v-for="todo in todos" v-bind:key="todo.id">        {{todo.id}}. {{todo.name}}</li>    </ul>  </div></template><script>export default {  data() {    return {      todos: [        { id: 1, name: 'Wash the dishes' },        { id: 2, name: 'Clean the car' },        { id: 3, name: 'Learn about Vue.js' },      ],    };  },};</script><style>ul,li {  list-style: none;  margin-left: 0;  padding-left: 0;}</style>

As you can see, we just have a simple application that returns an array of to-dos with varying items. Let's create a router inside src/router/index.js to match our new ...