Naming components, routes, and views

Adding names to your routes and components is not required when using Vue-router, but is good practice to do so and a good habit to get into.

Naming components

Components with names allow you to debug your errors more easily. In Vue, when a JavaScript error is thrown from a component, it will give you the name of that component, rather than listing Anonymous as the component.

An example of this would be if you tried to output a variable of {{ test }} in the food component—one that isn't available. By default, a JavaScript console error would look like the following:

Note the two <Anonymous> components in the stack.

By adding names to our components, we can easily identify...