Summary
We've covered a lot of ground in this chapter, so let's quickly recap what we've achieved. We started out with a very simple component for displaying a static list of hard coded products. We then added an implementation of the master-detail pattern to allow the user to select a product to view additional details.
We looked at when and why to refactor our component structure, and how we can compose a UI of parent-child component relationships by breaking out a product details component. We then took this a step further by moving the product details component into its own separate page, and introducing a multipage setup using client-side routing with Vue-Router.
Finally, we created a Products
table in our database, seeded it with sample data, and built two API endpoints to serve the data required by our UI to replace the static hard coded data we had been using. Thinking back to the earlier chapter on fundamentals of Vue.js, we have already covered a lot of topics outlined in that chapter...