Creating the admin frontend
Now that we have the backend app done, we can move on to working on the frontend. Since we have already created the Vue 3 project earlier for the admin frontend in the
admin-frontend folder, we just have to install packages that we need and then work on the code. We need the
graphql-request GraphQL package and the GraphQL client library, and the VeeValidate, Vue Router, Axios, and Yup packages.
To install them, we run the following command in the
npm i vee-validate@next vue-router@4 yup graphql graphql-request
After installing the packages, we can start working on the code.
Working with components
First, we start working on the components. In the
components folder, we add the
TopBar component into the
components/TopBar.vue file to hold the route links and the Log Out button by writing the following code:
<template> <p> <router-link to="/orders">Orders...