Initial commit

.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

README.org

@@ -0,0 +1,34 @@
+* Website
+
+Website, written in Typescript.
+
+* Libraries
+
+- Vue.js 3
+- Nuxt
+- Pinia
+- PrimeVue
+- ESLint
+
+* Development
+
+The following editor setup has been used:
+
+#+BEGIN_SRC sh
+$ bun x nuxi@latest init website
+$ bun nuxi module add eslint
+$ bun install --dev typescript
+$ bun install --dev @vue/language-server
+$ bun install --dev @vue/typescript-plugin
+
+$ bun install -g typescript
+$ bun install -g @vue/language-server
+$ bun install -g @vue/typescript-plugin
+
+# Pinia
+$ bun install pinia
+
+# PrimeVue
+$ bun install primevue primeicons @primevue/themes
+$ bun install --dev @primevue/nuxt-module
+#+END_SRC

eslint.config.mjs

@@ -0,0 +1,6 @@
+// @ts-check
+import withNuxt from './.nuxt/eslint.config.mjs'
+
+export default withNuxt(
+  // Your custom configs here
+)

nuxt.config.ts

@@ -0,0 +1,26 @@
+import Aura from "@primevue/themes/aura";
+
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+	compatibilityDate: "2024-11-01",
+	css: [
+		"primeicons/primeicons.css"
+	],
+	devtools: { enabled: true },
+	modules: [
+		"@nuxt/eslint",
+		"@primevue/nuxt-module"
+	],
+	primevue: {
+		options: {
+			theme: {
+				preset: Aura
+			}
+		}
+	},
+	dir: {
+		public: "../public"
+	},
+	srcDir: "src/",
+	ssr: false
+})

package.json

@@ -0,0 +1,32 @@
+{
+	"name": "website",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"build": "nuxt build",
+		"dev": "nuxt dev",
+		"generate": "nuxt generate",
+		"preview": "nuxt preview",
+		"postinstall": "nuxt prepare"
+	},
+	"dependencies": {
+		"@primevue/themes": "^4.2.3",
+		"nuxt": "^3.14.1592",
+		"pinia": "^2.2.6",
+		"primeicons": "^7.0.0",
+		"primevue": "^4.2.3",
+		"vue": "latest",
+		"vue-router": "latest"
+	},
+	"devDependencies": {
+		"@nuxt/eslint": "^0.7.1",
+		"@primevue/nuxt-module": "^4.2.3",
+		"@types/bun": "latest",
+		"@vue/language-server": "^2.1.10",
+		"@vue/typescript-plugin": "^2.1.10",
+		"typescript": "^5.7.2"
+	},
+	"trustedDependencies": [
+		"@parcel/watcher"
+	]
+}

public/robots.txt

@@ -0,0 +1 @@
+

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"
+}

tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}