10

Building an E-Commerce Store

- Browsing Products

In Chapter 9, Using Vue-Router Dynamic Routes to Load Data, we loaded our product data

into the Vuex store and created a product detail page where a user could view the product
and its variations. When viewing the product detail page, a user could change the variation

from the drop-down and the price and other details would update.

In this chapter, we are going to:

Create a home page listing page with specific products

Create a category page with a reusable component

Create an ordering mechanism

Create filters dynamically and allow the user to filter the products

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.