Let’s start up the project.

Like with the Pixel Art project, and the BillTracker app, we’re going to use the Vue CLI.

As usual, you are free to use it locally or use the web-based CodeSandbox environment.

This time, the project needs two major libraries: vuex and vue-router. Those radically influence the codebase, and that’s why you the Vue CLI when running locally, allows you to add them from the beginning, and changes the sample code quite radically.

So, word of caution: you can start the Vue CLI and have a completely different project than the one CodeSandbox comes with.

If you use CodeSandbox, start from this project: https://codesandbox.io/s/pz277vz9q.

It adds vue-router and vuex to the base Vue CLI project, and has a few more files:

  • src/router.js
  • src/store.js
  • views/About.vue
  • views/Home.vue

main.js and App.vue are also different now, as they integrate and make use of the store and the router.

I’ll leave it to you as an exercise to compare the code with https://codesandbox.io/s/vue, and find the exact differences in how the app works, and how the code changed to perform that difference.

Go to the next lesson