While Vue is a standalone library, it is even more powerful when combined with some of the optional tools in its ecosystem. For most projects, you'll include Vue Router and Vuex in your frontend stack, and use Vue Devtools for debugging.
Vue Devtools is a browser extension that can assist you in the development of a Vue.js project. Among other things, it allows you to see the hierarchy of components in your app and the state of components, which is useful for debugging:
Figure 1.1. Vue Devtools component hierarchy
We'll see what else it can do later in this section.
Vue Router allows you to map different states of your SPA to different URLs, giving you virtual pages. For example,
mydomain.com/ might be the front page of a blog and have a component hierarchy like this:
<div id="app"> <my-header></my-header> <blog-summaries></blog-summaries> <my-footer></my-footer> </div>
mydomain.com/post/1 might be an individual post from the blog and look like this:
<div id="app"> <my-header></my-header> <blog-post post-id="id"> <my-footer></my-footer> </div>
Changing from one page to the other doesn't require a reload of the page, just swapping the middle component to reflect the state of the URL, which is exactly what Vue Router does.
Figure 1.2. Vue Devtools Vuex tab
The left column tracks changes made to the application data. For example, say the user saves or unsaves an item. You might name this event
toggleSaved. Vue Devtools lets you see the particulars of this event as it occurs.
We can also revert to any previous state of the data without having to touch the code or reload the page. This function, called Time Travel Debugging, is something you'll find very useful for debugging complex UIs.