Creating the customer frontend

Now that we have finished with the admin frontend, we finish this chapter's project by creating the customer's frontend. This is similar to the admin frontend except that there is no authentication required to use it.

We start by installing the same packages that we installed for the admin frontend. So, we go to the frontend folder and run the following command to install all the packages:

npm i vee-validate@next vue-router@4 yup vuex@4 vuex-persistedstate@ ^4.0.0-beta.3 graphql graphql-request

We need Vuex with the Vuex-Persistedstate plugin to store the shopping cart items. The rest of the packages are the same as for the admin frontend.

Creating the plugins folder

We create a plugins folder in the src folder and add the routes by creating the router.js file in the folder and writing the following code:

import { createRouter, createWebHashHistory } from 'vue-router'
import Shop from '@/views/Shop'
import...