Analyzing additional data with Vue Devtools plugins

You have probably noticed from the previous section that Vue Devtools not only includes information regarding the core framework but also exposes extra information, such as the Pinia store and vue-router.

This happened automatically, as we did not have to do anything extra to expand the Vue Devtools capabilities. In fact, the plugins are actually part of the packages that we installed in the application, so installing a package can sometimes result in an additional feature being displayed in our Vue Devtools.

Any plugin offers something different. In our case, both Pinia and vue-router adds a layer in the Timeline view, information in the component details panel, and finally, an extra tab on the main navigation.

In this section, we are going to deep dive into the two available plugins – Pinia and vue-router.

The Pinia Vue Devtools plugin

The first extension plugin that we are going to analyze is the one provided...