9

Using Vue-Router Dynamic

Routes to Load Data

In Chapter 8, Introducing Vue-Router and Loading URL-Based Components, we explored Vue-

router and its capabilities and functionality. With that knowledge, we can now progress on
to making our shop with Vue. Before we jump into the code and start creating, we should

first plan how our shop is going to work, what URLs we need, and what components we
need to make. Once we've planned our app we can move on to creating a product page.

In this chapter, we are going to:

Outline our components and routes, and create placeholder files

Load a product CSV file, process it, and cache in Vuex

Create an individual product page with images and product variations

Outline and plan your app

First, let's think about the overall app and the user flow.

We are going to be creating a shop without a payment processing gateway. The shop
homepage will display a hand-picked list of products. The user will be able to browse the

products using categories and narrow down the selection using filters we've made. They

will be able to select a product and view more details about it. The product will have
variations (size, color, and such) and may have several product images. The user will be

able to add a variation to their basket. From there, they can either continue browsing the
products and add more to their basket, or proceed to checkout, where they will be asked for

their name and address, and to pay. An order confirmation screen will be shown.