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 admin-frontend folder:

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...