+ Replace this page by removing {{ `` }} in pages/index.vue.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/web/src/components/README.md b/web/src/components/README.md
new file mode 100644
index 0000000..d1dc92f
--- /dev/null
+++ b/web/src/components/README.md
@@ -0,0 +1,35 @@
+# Components
+
+Vue template files in this folder are automatically imported.
+
+## 🚀 Usage
+
+Importing is handled by [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components). This plugin automatically imports `.vue` files created in the `src/components` directory, and registers them as global components. This means that you can use any component in your application without having to manually import it.
+
+The following example assumes a component located at `src/components/MyComponent.vue`:
+
+```vue
+
+
+
+
+
+
+
+```
+
+When your template is rendered, the component's import will automatically be inlined, which renders to this:
+
+```vue
+
+
+
+
+
+
+
+```
diff --git a/web/src/main.ts b/web/src/main.ts
new file mode 100644
index 0000000..c8fc172
--- /dev/null
+++ b/web/src/main.ts
@@ -0,0 +1,20 @@
+/**
+ * main.ts
+ *
+ * Bootstraps Vuetify and other plugins then mounts the App`
+ */
+
+// Plugins
+import { registerPlugins } from '@/plugins'
+
+// Components
+import App from './App.vue'
+
+// Composables
+import { createApp } from 'vue'
+
+const app = createApp(App)
+
+registerPlugins(app)
+
+app.mount('#app')
diff --git a/web/src/pages/README.md b/web/src/pages/README.md
new file mode 100644
index 0000000..341536c
--- /dev/null
+++ b/web/src/pages/README.md
@@ -0,0 +1,5 @@
+# Pages
+
+Vue components created in this folder will automatically be converted to navigatable routes.
+
+Full documentation for this feature can be found in the Official [unplugin-vue-router](https://github.com/posva/unplugin-vue-router) repository.
diff --git a/web/src/pages/index.vue b/web/src/pages/index.vue
new file mode 100644
index 0000000..dac59c7
--- /dev/null
+++ b/web/src/pages/index.vue
@@ -0,0 +1,7 @@
+
+
+
+
+
diff --git a/web/src/plugins/README.md b/web/src/plugins/README.md
new file mode 100644
index 0000000..62201c7
--- /dev/null
+++ b/web/src/plugins/README.md
@@ -0,0 +1,3 @@
+# Plugins
+
+Plugins are a way to extend the functionality of your Vue application. Use this folder for registering plugins that you want to use globally.
diff --git a/web/src/plugins/index.ts b/web/src/plugins/index.ts
new file mode 100644
index 0000000..d3c748a
--- /dev/null
+++ b/web/src/plugins/index.ts
@@ -0,0 +1,18 @@
+/**
+ * plugins/index.ts
+ *
+ * Automatically included in `./src/main.ts`
+ */
+
+// Plugins
+import vuetify from './vuetify'
+import router from '../router'
+
+// Types
+import type { App } from 'vue'
+
+export function registerPlugins (app: App) {
+ app
+ .use(vuetify)
+ .use(router)
+}
diff --git a/web/src/plugins/vuetify.ts b/web/src/plugins/vuetify.ts
new file mode 100644
index 0000000..7652788
--- /dev/null
+++ b/web/src/plugins/vuetify.ts
@@ -0,0 +1,19 @@
+/**
+ * plugins/vuetify.ts
+ *
+ * Framework documentation: https://vuetifyjs.com`
+ */
+
+// Styles
+import '@mdi/font/css/materialdesignicons.css'
+import 'vuetify/styles'
+
+// Composables
+import { createVuetify } from 'vuetify'
+
+// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
+export default createVuetify({
+ theme: {
+ defaultTheme: 'dark',
+ },
+})
diff --git a/web/src/router/index.ts b/web/src/router/index.ts
new file mode 100644
index 0000000..aeab4c3
--- /dev/null
+++ b/web/src/router/index.ts
@@ -0,0 +1,35 @@
+/**
+ * router/index.ts
+ *
+ * Automatic routes for `./src/pages/*.vue`
+ */
+
+// Composables
+import { createRouter, createWebHistory } from 'vue-router/auto'
+import { routes } from 'vue-router/auto-routes'
+
+const router = createRouter({
+ history: createWebHistory(import.meta.env.BASE_URL),
+ routes,
+})
+
+// Workaround for https://github.com/vitejs/vite/issues/11804
+router.onError((err, to) => {
+ if (err?.message?.includes?.('Failed to fetch dynamically imported module')) {
+ if (!localStorage.getItem('vuetify:dynamic-reload')) {
+ console.log('Reloading page to fix dynamic import error')
+ localStorage.setItem('vuetify:dynamic-reload', 'true')
+ location.assign(to.fullPath)
+ } else {
+ console.error('Dynamic import error, reloading page did not fix it', err)
+ }
+ } else {
+ console.error(err)
+ }
+})
+
+router.isReady().then(() => {
+ localStorage.removeItem('vuetify:dynamic-reload')
+})
+
+export default router
diff --git a/web/src/styles/README.md b/web/src/styles/README.md
new file mode 100644
index 0000000..ea86179
--- /dev/null
+++ b/web/src/styles/README.md
@@ -0,0 +1,3 @@
+# Styles
+
+This directory is for configuring the styles of the application.
diff --git a/web/src/styles/settings.scss b/web/src/styles/settings.scss
new file mode 100644
index 0000000..3e36a27
--- /dev/null
+++ b/web/src/styles/settings.scss
@@ -0,0 +1,10 @@
+/**
+ * src/styles/settings.scss
+ *
+ * Configures SASS variables and Vuetify overwrites
+ */
+
+// https://vuetifyjs.com/features/sass-variables/`
+// @use 'vuetify/settings' with (
+// $color-pack: false
+// );
diff --git a/web/src/vite-env.d.ts b/web/src/vite-env.d.ts
new file mode 100644
index 0000000..323c78a
--- /dev/null
+++ b/web/src/vite-env.d.ts
@@ -0,0 +1,7 @@
+///
+
+declare module '*.vue' {
+ import type { DefineComponent } from 'vue'
+ const component: DefineComponent<{}, {}, any>
+ export default component
+}
diff --git a/web/tsconfig.json b/web/tsconfig.json
new file mode 100644
index 0000000..301114c
--- /dev/null
+++ b/web/tsconfig.json
@@ -0,0 +1,32 @@
+{
+ "compilerOptions": {
+ "target": "ESNext",
+ "jsx": "preserve",
+ "lib": ["DOM", "ESNext"],
+ "baseUrl": ".",
+ "module": "ESNext",
+ "moduleResolution": "bundler",
+ "paths": {
+ "@/*": ["src/*"]
+ },
+ "resolveJsonModule": true,
+ "types": [
+ "vite/client",
+ "unplugin-vue-router/client"
+ ],
+ "allowJs": true,
+ "strict": true,
+ "strictNullChecks": true,
+ "noUnusedLocals": true,
+ "esModuleInterop": true,
+ "forceConsistentCasingInFileNames": true,
+ "isolatedModules": true,
+ "skipLibCheck": true
+ },
+ "include": [
+ "src/**/*",
+ "src/**/*.vue"
+ ],
+ "exclude": ["dist", "node_modules", "cypress"],
+ "references": [{ "path": "./tsconfig.node.json" }],
+}
diff --git a/web/tsconfig.node.json b/web/tsconfig.node.json
new file mode 100644
index 0000000..348f346
--- /dev/null
+++ b/web/tsconfig.node.json
@@ -0,0 +1,9 @@
+{
+ "compilerOptions": {
+ "composite": true,
+ "module": "ESNext",
+ "moduleResolution": "bundler",
+ "allowSyntheticDefaultImports": true
+ },
+ "include": ["vite.config.mts"]
+}
diff --git a/web/typed-router.d.ts b/web/typed-router.d.ts
new file mode 100644
index 0000000..331ee51
--- /dev/null
+++ b/web/typed-router.d.ts
@@ -0,0 +1,23 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-router. ‼️ DO NOT MODIFY THIS FILE ‼️
+// It's recommended to commit this file.
+// Make sure to add this file to your tsconfig.json file as an "includes" or "files" entry.
+
+declare module 'vue-router/auto-routes' {
+ import type {
+ RouteRecordInfo,
+ ParamValue,
+ ParamValueOneOrMore,
+ ParamValueZeroOrMore,
+ ParamValueZeroOrOne,
+ } from 'vue-router'
+
+ /**
+ * Route name map generated by unplugin-vue-router
+ */
+ export interface RouteNamedMap {
+ '/': RouteRecordInfo<'/', '/', Record, Record>,
+ }
+}
diff --git a/web/vite.config.mts b/web/vite.config.mts
new file mode 100644
index 0000000..7d27c0e
--- /dev/null
+++ b/web/vite.config.mts
@@ -0,0 +1,54 @@
+// Plugins
+import Components from 'unplugin-vue-components/vite'
+import Vue from '@vitejs/plugin-vue'
+import Vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
+import ViteFonts from 'unplugin-fonts/vite'
+import VueRouter from 'unplugin-vue-router/vite'
+
+// Utilities
+import { defineConfig } from 'vite'
+import { fileURLToPath, URL } from 'node:url'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [
+ VueRouter(),
+ Vue({
+ template: { transformAssetUrls },
+ }),
+ // https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#readme
+ Vuetify({
+ autoImport: true,
+ styles: {
+ configFile: 'src/styles/settings.scss',
+ },
+ }),
+ Components(),
+ ViteFonts({
+ google: {
+ families: [ {
+ name: 'Roboto',
+ styles: 'wght@100;300;400;500;700;900',
+ }],
+ },
+ }),
+ ],
+ define: { 'process.env': {} },
+ resolve: {
+ alias: {
+ '@': fileURLToPath(new URL('./src', import.meta.url)),
+ },
+ extensions: [
+ '.js',
+ '.json',
+ '.jsx',
+ '.mjs',
+ '.ts',
+ '.tsx',
+ '.vue',
+ ],
+ },
+ server: {
+ port: 3000,
+ },
+})