Like in the previous project, go to https://codesandbox.io/s/vue to start a new CodeSandbox Vue CLI project.

I’m explaining how to build the application using CodeSandbox, but you can use the Vue CLI locally if you prefer - it’s the same.

We start by removing the unneeded parts of the default Vue CLI app:

  • the contents of the src/App.vue file
  • the src/components/HelloWorld.vue file

Let’s now talk about the app structure, and define the main components that will compose our Bill Tracker application.

If you remember the screenshots in the previous lesson, we’ll need:

  1. One component to enter a new category
  2. One component to display the categories list on top
  3. One component to list the bills table
  4. One component to display the chart
  5. One component to add a new bill

Based on what they should do, let’s give those components a proper name:

  1. AddCategory
  2. NavBar
  3. BillsTable
  4. Chart
  5. AddBill

Go on and create an empty .vue file for each of those components in the src/components folder.

Here is the CodeSandbox with the progress so far.

Go to the next lesson