We will continue our to-do list project or you can create a new Vue project with Vue CLI, as learned in the 'Creating your first project with Vue CLI' recipe in Chapter 2, Introducing TypeScript and the Vue Ecosystem.
When developing any Vue application, it's always a good practice to develop with vue-devtools to hand.
Follow these steps to understand how to use vue-devtools and how to properly debug a Vue application:
- To enter vue-devtools, you need to have it installed in your browser first, so check the 'Getting ready' section of this recipe for the links to the extension for Chrome or Firefox. In your Vue development application, enter browser developer inspector mode. A new tab with the name Vue must appear:
- The first tab that you are presented with is the Components tab. This tab shows your application component tree. If you click on a component, you will be able to see all the available data, the computed property, extra data injected...
