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 TodoList component and display it as the root:

import Vue from 'vue';
import Router from 'vue-router';
import TodoList from '../components/TodoList';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'TodoList',
      component: TodoList,
    },
  ],
});

As we're using vue-router, we'll also need to install it. Run the following in your Terminal:

$ npm install vue-router --save-dev

We can then add the router to main.js:

import Vue from 'vue'
import App from './App.vue'
import router from './router';

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

I've now added router-view and elected to remove the Vue logo from App.vue, so we have a cleaner user interface. Here's the template for App.vue:

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

As we can see in our browser, it displays our template with the name of TodoList and the todo items we created as well:

Let's write some tests for this component