Listing the products

Before we create any filtering, curated lists, ordering components, and functionality, we need to create a basic product list – showing all the products first, and then we can create a paginated component that we can then reuse throughout the app.

Adding a new route

Let us add a new route to our routes array. For now, we'll work on the HomePage component, which will have the / route. Make sure you add it to the top of the routes array, so it doesn't get overridden by any of the other components:

const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: HomePage
    },
    {
      path: '/product/:slug', 
      component: ProductPage
    },

    {
      path: '/404', 
      alias: '*',
      component: PageNotFound
    }
  ]
});

Within the HomePage component, create a new computed property and gather all the products from the store. Ensure the products have loaded before displaying anything in the template. Populate the HomePage...