Using Vue-Router Dynamic Routes to Load Data Chapter 9The whole shop app will be created in Vue and will run client-side. This will not cover any
server-side code needed for payment, user accounts, stock management, or validation.
The app will use Vue-router for handling URLs and Vuex for storing products, basket
contents, and user details.
Components
With a user flow outlined, we need to plan which components we need to make for our
shop and what they will be called. This helps with developing the app, as we have a clear
idea of what components we need to create. We will also decide on the component names.
Following the Vue style guide (https://vuejs.org/v2/style-guide/index.html), all our
components will consist of two names.
Route components
The following components will be used in conjunction with Vue-router to form the pages
for our app:
Shop homepage—HomePage: The shop homepage will display a list of products
that are curated by the shop owner. This will use a pre-selected list of product
handles to display.
Category page—CategoryPage: This will list the products from a specific
category. The category listing page will also have filters.
Product page—ProductPage: The product page will display product details,
images, and variations of the product.
Basket—OrderBasket: In the basket, the user will be able to review the
products they've added, remove unwanted items, and alter the quantity of each
item. It will also show the overall cost of the order.
Checkout—OrderCheckout: The checkout will lock down the basket – taking
away the ability to remove and update products, and will have a form for the
user to enter their address.
Order confirmation—OrderConfirmation: This component will be displayed
after the order has been placed, confirming the products purchased, the delivery
address, and the total price.
404 page—PageNotFound: An error page when an incorrect URL is entered.