Webapp: sample component with an assets fetch

GuessNN-webapp/src/App.vue

@@ -1,6 +1,13 @@
 <template>
-TODO: everything
+	<main-component></main-component>
 </template>
 
-<style>
+<script>
-</style>
+import MainComponent from "./components/MainComponent.vue";
+
+export default {
+	components: { MainComponent },
+};
+</script>
+
+<style></style>

GuessNN-webapp/src/assets/test.json

@@ -0,0 +1,3 @@
+{
+  "test": "hello"
+}

GuessNN-webapp/src/components/MainComponent.vue

@@ -0,0 +1,28 @@
+<template>
+	<p>{{ value }}</p>
+	<a :href="jsonURL">Test</a>
+</template>
+
+<script lang="ts">
+import jsonURL from "../assets/test.json?url";
+
+export default {
+	name: "MainComponent",
+	data() {
+		return {
+			value: "Test",
+			jsonURL: jsonURL,
+		};
+	},
+	mounted() {
+		fetch(jsonURL)
+			.then((v) => v.json())
+			.then((json) => {
+				console.log(json);
+				this.value = json;
+			});
+	},
+};
+</script>
+
+<style scoped></style>

GuessNN-webapp/vite.config.ts

@@ -5,10 +5,10 @@ import vue from "@vitejs/plugin-vue";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+	plugins: [vue()],
-  resolve: {
+	resolve: {
-    alias: {
+		alias: {
-      "@": fileURLToPath(new URL("./src", import.meta.url)),
+			"@": fileURLToPath(new URL("./src", import.meta.url)),
-    },
+		},
-  },
+	},
 });