Initial commit

src/app.vue

@@ -0,0 +1,5 @@
+<template>
+	<NuxtLayout>
+		<NuxtPage />
+	</NuxtLayout>
+</template>

src/app/spa-loading-template.html

@@ -0,0 +1,41 @@
+<!-- https://github.com/barelyhuman/snips/blob/dev/pages/css-loader.md -->
+<div class="loader"></div>
+<style>
+	.loader {
+		display: block;
+		position: fixed;
+		z-index: 1031;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		width: 36px;
+		height: 36px;
+		box-sizing: border-box;
+		border: solid 2px transparent;
+		border-top-color: #000;
+		border-left-color: #000;
+		border-bottom-color: #efefef;
+		border-right-color: #efefef;
+		border-radius: 50%;
+		-webkit-animation: loader 400ms linear infinite;
+		animation: loader 400ms linear infinite;
+	}
+
+	@-webkit-keyframes loader {
+		0% {
+			-webkit-transform: translate(-50%, -50%) rotate(0deg);
+		}
+		100% {
+			-webkit-transform: translate(-50%, -50%) rotate(360deg);
+		}
+	}
+
+	@keyframes loader {
+		0% {
+			transform: translate(-50%, -50%) rotate(0deg);
+		}
+		100% {
+			transform: translate(-50%, -50%) rotate(360deg);
+		}
+	}
+</style>

src/components/AppAlert.vue

@@ -0,0 +1,5 @@
+<template>
+	<span>
+		<slot />
+	</span>
+</template>

src/components/shared/Footer.vue

@@ -0,0 +1,2 @@
+<template>
+</template>

src/components/shared/Header.vue

@@ -0,0 +1,3 @@
+<template>
+	<SharedNavMenu />
+</template>

src/components/shared/NavMenu.vue

@@ -0,0 +1,56 @@
+<template>
+    <div class="card">
+        <Menubar :model="items">
+            <template #item="{ item, props, hasSubmenu }">
+                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
+                    <a v-ripple :href="href" v-bind="props.action" @click="navigate">
+                        <span :class="item.icon" />
+                        <span>{{ item.label }}</span>
+                    </a>
+                </router-link>
+                <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
+                    <span :class="item.icon" />
+                    <span>{{ item.label }}</span>
+                    <span v-if="hasSubmenu" class="pi pi-fw pi-angle-down" />
+                </a>
+            </template>
+        </Menubar>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+
+const items = ref([
+    {
+        label: "Home",
+        icon: "pi pi-home",
+		route: "/"
+    },
+    {
+        label: "Todos",
+        icon: "pi pi-check",
+        command: () => {
+            router.push("/todos");
+        }
+    },
+    {
+        label: "About",
+        icon: "pi pi-link",
+		route: "#"
+    },
+    {
+        label: "Service",
+        icon: "pi pi-link",
+		route: "#"
+    },
+    {
+        label: "Contact",
+        icon: "pi pi-link",
+		route: "#"
+    },
+]);
+</script>

src/layouts/default.vue

@@ -0,0 +1,5 @@
+<template>
+	<SharedHeader />
+	<slot />
+	<SharedFooter />
+</template>

src/pages/index.vue

@@ -0,0 +1,8 @@
+<template>
+	<div>
+		<h1>Welcome to the homepage</h1>
+		<AppAlert>
+			This is an auto-imported component
+		</AppAlert>
+	</div>
+</template>

src/pages/todos.vue

@@ -0,0 +1,24 @@
+<template>
+    <div class="card">
+        <DataTable :value="todos" tableStyle="min-width: 50rem">
+            <Column field="number" header="#"></Column>
+            <Column field="id" header="ID"></Column>
+            <Column field="title" header="Title"></Column>
+            <Column field="modifier" header="Modifier"></Column>
+        </DataTable>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+// import { ProductService } from '@/service/ProductService';
+
+ onMounted(() => {
+	 todos.value = [
+		 { number: "1", id: "toby", title: "Do stuff..", modifier: "hehe"}
+	 ]
+});
+
+const todos = ref();
+
+</script>

src/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}