add a minimal working example

backend/customers/views.py

@@ -27,7 +27,7 @@ class CustomerViewSet(viewsets.ModelViewSet):
     """
     queryset = Customer.objects.all()
     serializer_class = CustomerSerializer
-    permission_classes = [permissions.IsAuthenticated]
+    # permission_classes = [permissions.IsAuthenticated]
 
 
 class DeviceManufacturerViewSet(viewsets.ModelViewSet):

frontend/src/App.vue

@@ -1,15 +1,13 @@
 <template>
-  <img alt="Vue logo" src="./assets/logo.png" />
-  <HelloWorld msg="Hello Vue 3.0 + Vite" />
+    <div>
+        <customer></customer>
+    </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
-
 export default {
-  name: 'App',
-  components: {
-    HelloWorld
-  }
-}
+    data() {
+        return {};
+    },
+};
 </script>

frontend/src/axios-api.js

@@ -0,0 +1,8 @@
+import axios from "axios";
+
+const getAPI = axios.create({
+    baseURL: "http://localhost:8000/api/",
+    timeout: 1000,
+});
+
+export { getAPI };

frontend/src/components/Customers.vue

@@ -0,0 +1,37 @@
+<template>
+    <table>
+        <tr>
+            <th>Customer</th>
+            <th>Description</th>
+        </tr>
+        <tr v-for="customer in customers" :key="customer.id">
+            <td>
+                {{ customer.name }}
+            </td>
+            <td>{{ customer.description }}</td>
+        </tr>
+    </table>
+</template>
+
+<script>
+import { getAPI } from "../axios-api";
+
+export default {
+    data() {
+        return {
+            customers: [],
+        };
+    },
+    created() {
+        getAPI
+            .get("/customers/")
+            .then((response) => {
+                console.log("Post API has recieved data");
+                this.customers = response.data.results;
+            })
+            .catch((err) => {
+                console.log(err);
+            });
+    },
+};
+</script>

frontend/src/main.js

@@ -1,5 +1,9 @@
-import { createApp } from 'vue'
-import App from './App.vue'
-import './index.css'
+import { createApp } from "vue";
 
-createApp(App).mount('#app')
+import App from "./App.vue";
+import Customer from "./components/Customers.vue";
+import "./index.css";
+
+const app = createApp(App);
+app.component("customer", Customer);
+app.mount("#app");

frontend/src/routes.js

@@ -0,0 +1,16 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import Customers from './views/Customers'
+
+
+Vue.use(VueRouter)
+
+export default new VueRouter({
+    history: 'history',
+    base: process.env.BASE_URL,
+    routes: [{
+        path: '/',
+        name: 'customers',
+        component: Customers,
+    }, ]
+})