+ Replace this page by removing {{ `` }} in pages/index.vue.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/stfrontend/src/components/README.md b/stfrontend/src/components/README.md
new file mode 100644
index 0000000..d1dc92f
--- /dev/null
+++ b/stfrontend/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/stfrontend/src/layouts/README.md b/stfrontend/src/layouts/README.md
new file mode 100644
index 0000000..4016af3
--- /dev/null
+++ b/stfrontend/src/layouts/README.md
@@ -0,0 +1,5 @@
+# Layouts
+
+Layouts are reusable components that wrap around pages. They are used to provide a consistent look and feel across multiple pages.
+
+Full documentation for this feature can be found in the Official [vite-plugin-vue-layouts](https://github.com/JohnCampionJr/vite-plugin-vue-layouts) repository.
diff --git a/stfrontend/src/layouts/default.vue b/stfrontend/src/layouts/default.vue
new file mode 100644
index 0000000..ff632fb
--- /dev/null
+++ b/stfrontend/src/layouts/default.vue
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/stfrontend/src/main.ts b/stfrontend/src/main.ts
new file mode 100644
index 0000000..c8fc172
--- /dev/null
+++ b/stfrontend/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/stfrontend/src/pages/README.md b/stfrontend/src/pages/README.md
new file mode 100644
index 0000000..341536c
--- /dev/null
+++ b/stfrontend/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/stfrontend/src/pages/index.vue b/stfrontend/src/pages/index.vue
new file mode 100644
index 0000000..dac59c7
--- /dev/null
+++ b/stfrontend/src/pages/index.vue
@@ -0,0 +1,7 @@
+
+
+
+
+
diff --git a/stfrontend/src/plugins/README.md b/stfrontend/src/plugins/README.md
new file mode 100644
index 0000000..62201c7
--- /dev/null
+++ b/stfrontend/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/stfrontend/src/plugins/index.ts b/stfrontend/src/plugins/index.ts
new file mode 100644
index 0000000..c75aa61
--- /dev/null
+++ b/stfrontend/src/plugins/index.ts
@@ -0,0 +1,20 @@
+/**
+ * plugins/index.ts
+ *
+ * Automatically included in `./src/main.ts`
+ */
+
+// Plugins
+import vuetify from './vuetify'
+import pinia from '../stores'
+import router from '../router'
+
+// Types
+import type { App } from 'vue'
+
+export function registerPlugins (app: App) {
+ app
+ .use(vuetify)
+ .use(router)
+ .use(pinia)
+}
diff --git a/stfrontend/src/plugins/vuetify.ts b/stfrontend/src/plugins/vuetify.ts
new file mode 100644
index 0000000..7652788
--- /dev/null
+++ b/stfrontend/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/stfrontend/src/router/index.ts b/stfrontend/src/router/index.ts
new file mode 100644
index 0000000..5d4b8bc
--- /dev/null
+++ b/stfrontend/src/router/index.ts
@@ -0,0 +1,36 @@
+/**
+ * router/index.ts
+ *
+ * Automatic routes for `./src/pages/*.vue`
+ */
+
+// Composables
+import { createRouter, createWebHistory } from 'vue-router/auto'
+import { setupLayouts } from 'virtual:generated-layouts'
+import { routes } from 'vue-router/auto-routes'
+
+const router = createRouter({
+ history: createWebHistory(import.meta.env.BASE_URL),
+ routes: setupLayouts(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/stfrontend/src/stores/README.md b/stfrontend/src/stores/README.md
new file mode 100644
index 0000000..54f8e03
--- /dev/null
+++ b/stfrontend/src/stores/README.md
@@ -0,0 +1,5 @@
+# Store
+
+Pinia stores are used to store reactive state and expose actions to mutate it.
+
+Full documentation for this feature can be found in the Official [Pinia](https://pinia.esm.dev/) repository.
diff --git a/stfrontend/src/stores/app.ts b/stfrontend/src/stores/app.ts
new file mode 100644
index 0000000..7429543
--- /dev/null
+++ b/stfrontend/src/stores/app.ts
@@ -0,0 +1,8 @@
+// Utilities
+import { defineStore } from 'pinia'
+
+export const useAppStore = defineStore('app', {
+ state: () => ({
+ //
+ }),
+})
diff --git a/stfrontend/src/stores/index.ts b/stfrontend/src/stores/index.ts
new file mode 100644
index 0000000..1536252
--- /dev/null
+++ b/stfrontend/src/stores/index.ts
@@ -0,0 +1,4 @@
+// Utilities
+import { createPinia } from 'pinia'
+
+export default createPinia()
diff --git a/stfrontend/src/styles/README.md b/stfrontend/src/styles/README.md
new file mode 100644
index 0000000..ea86179
--- /dev/null
+++ b/stfrontend/src/styles/README.md
@@ -0,0 +1,3 @@
+# Styles
+
+This directory is for configuring the styles of the application.
diff --git a/stfrontend/src/styles/settings.scss b/stfrontend/src/styles/settings.scss
new file mode 100644
index 0000000..3e36a27
--- /dev/null
+++ b/stfrontend/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/stfrontend/src/typed-router.d.ts b/stfrontend/src/typed-router.d.ts
new file mode 100644
index 0000000..331ee51
--- /dev/null
+++ b/stfrontend/src/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/stfrontend/tsconfig.app.json b/stfrontend/tsconfig.app.json
new file mode 100644
index 0000000..e14c754
--- /dev/null
+++ b/stfrontend/tsconfig.app.json
@@ -0,0 +1,14 @@
+{
+ "extends": "@vue/tsconfig/tsconfig.dom.json",
+ "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+ "exclude": ["src/**/__tests__/*"],
+ "compilerOptions": {
+ "composite": true,
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["./src/*"]
+ }
+ }
+}
diff --git a/stfrontend/tsconfig.json b/stfrontend/tsconfig.json
new file mode 100644
index 0000000..66b5e57
--- /dev/null
+++ b/stfrontend/tsconfig.json
@@ -0,0 +1,11 @@
+{
+ "files": [],
+ "references": [
+ {
+ "path": "./tsconfig.node.json"
+ },
+ {
+ "path": "./tsconfig.app.json"
+ }
+ ]
+}
diff --git a/stfrontend/tsconfig.node.json b/stfrontend/tsconfig.node.json
new file mode 100644
index 0000000..5a0c6a5
--- /dev/null
+++ b/stfrontend/tsconfig.node.json
@@ -0,0 +1,19 @@
+{
+ "extends": "@tsconfig/node22/tsconfig.json",
+ "include": [
+ "vite.config.*",
+ "vitest.config.*",
+ "cypress.config.*",
+ "nightwatch.conf.*",
+ "playwright.config.*"
+ ],
+ "compilerOptions": {
+ "composite": true,
+ "noEmit": true,
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+
+ "module": "ESNext",
+ "moduleResolution": "Bundler",
+ "types": ["node"]
+ }
+}
diff --git a/stfrontend/vite.config.mts b/stfrontend/vite.config.mts
new file mode 100644
index 0000000..9c92f25
--- /dev/null
+++ b/stfrontend/vite.config.mts
@@ -0,0 +1,81 @@
+// Plugins
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+import Fonts from 'unplugin-fonts/vite'
+import Layouts from 'vite-plugin-vue-layouts'
+import Vue from '@vitejs/plugin-vue'
+import VueRouter from 'unplugin-vue-router/vite'
+import Vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
+
+// Utilities
+import { defineConfig } from 'vite'
+import { fileURLToPath, URL } from 'node:url'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [
+ VueRouter({
+ dts: 'src/typed-router.d.ts',
+ }),
+ Layouts(),
+ AutoImport({
+ imports: [
+ 'vue',
+ {
+ 'vue-router/auto': ['useRoute', 'useRouter'],
+ }
+ ],
+ dts: 'src/auto-imports.d.ts',
+ eslintrc: {
+ enabled: true,
+ },
+ vueTemplate: true,
+ }),
+ Components({
+ dts: 'src/components.d.ts',
+ }),
+ Vue({
+ template: { transformAssetUrls },
+ }),
+ // https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#readme
+ Vuetify({
+ autoImport: true,
+ styles: {
+ configFile: 'src/styles/settings.scss',
+ },
+ }),
+ Fonts({
+ 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,
+ },
+ css: {
+ preprocessorOptions: {
+ sass: {
+ api: 'modern-compiler',
+ },
+ },
+ },
+})