feat: setup frappe ui

frontend/src/pages/Courses.vue

@@ -0,0 +1,40 @@
+<template>
+   <div class="container">
+        <div class="text-xl font-semibold">
+                All Courses
+            </div>
+            <div>
+                {{ courses }}
+            </div>
+   </div>
+</template>
+
+<script>
+export default {
+    name: "Courses",
+    resources: {
+        courses() {
+            return {
+                type: "list",
+                doctype: "LMS Course",
+                fields: ["name", "title", "short_introduction", "image"],
+                orderBy: "creation desc",
+                filters: {
+                    published: 1
+                },
+                transform(data) {
+                    return data.map((course) => {
+                        course.data = JSON.parse(course.data)
+                        return course
+                    })
+                },
+            }
+        }
+    },
+    computed: {
+        courses() {
+            console.log(this.courses)
+        }
+    }
+}
+</script>

frontend/src/pages/Home.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="max-w-3xl py-12 mx-auto">
+    <Button
+      icon-left="code"
+      @click="$resources.ping.fetch"
+      :loading="$resources.ping.loading"
+    >
+      Click to send 'ping' request
+    </Button>
+    <div>
+      {{ $resources.ping.data }}
+    </div>
+    <pre>{{ $resources.ping }}</pre>
+
+    <Button @click="showDialog = true">Open Dialog</Button>
+    <Dialog title="Title" v-model="showDialog"> Dialog content </Dialog>
+  </div>
+</template>
+
+<script>
+import { Dialog } from 'frappe-ui'
+
+export default {
+  name: 'Home',
+  data() {
+    return {
+      showDialog: false,
+    }
+  },
+  resources: {
+    ping: {
+      url: 'ping',
+    },
+  },
+  components: {
+    Dialog,
+  },
+}
+</script>