Our hard work visualized

It is one thing to store the data. For the user, the data only has value if we can present it within a certain context. We’ve done a small exercise when displaying the compilation of a routine before saving. In this part, we’ll see a couple of different examples of displaying the data.

We’ll make sure to accommodate an empty state (so feel free to delete any items or try a new login), and after we’ve added some workouts, we’ll find ways to display the data.

Let’s start by replacing the home page. In this case, we already have a route and we have the Home.vue view, but we’ll remove the reference to the HelloWorld.vue component and create an empty History.vue <template> component instead. And then, in Home.vue, we’ll reference the History.vue file instead of HelloWorld.vue.

A view-based dashboard

We can start with a quick component to show the latest statistics of the user. When executing...