Displaying a single product

With our data stored, we can now begin making our components and displaying content on the frontend. We're going to start by making a product view – displaying product details, variations, and images. We'll move on to creating the category listing page in Chapter 10, Building an E-Commerce Store – Browsing Products.

The first step in making our product view is to create the route, to allow the component to be displayed via a URL. Referring back to our notes at the beginning of the chapter, the product component is to be loaded on the /product/:slug path.

Create a routes array in your Vue-router, with the path and component specified:

const router = new VueRouter({
  routes: [
    {
      path: '/product/:slug', 
      component: ProductPage
    }
  ]
});

With the layout of the products object explained, we can start to understand...