scaffold frontend

frontend/src/App.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+// This starter template is using Vue 3 <script setup> SFCs
+// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
+import HelloWorld from './components/HelloWorld.vue';
+import Input from './components/Input.vue';
+</script>
+
+<template>
+  <img alt="Vue logo" src="./assets/logo.png" />
+  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
+  <Input />
+</template>
+
+<style scoped>
+</style>

frontend/src/components/HelloWorld.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+defineProps<{ msg: string }>()
+</script>
+
+<template>
+<h1>{{ msg }}</h1>
+</template>
+
+<style scoped>
+</style>

frontend/src/components/Input.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+</script>
+
+<template>
+<div>
+<label class="block text-sm font-medium text-gray-700">Label</label>
+<div class="mt-1 relative rounded-md shadow-sm">
+<input type="text" class="focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-7 pr-12 sm:text-sm border-gray-300 rounded-md" />
+</div>
+</div>
+</template>

frontend/src/env.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

frontend/src/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

frontend/src/main.ts

@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import './index.css';
+
+createApp(App).mount('#app')