Nuxt coursework boilerplate: Tailwind, Drizzle (MySQL), Redis, Pug page, Vercel deploy workflow

2026-09-06 11:01:04 +02:00
commit 5920325d65
20 changed files with 2226 additions and 0 deletions
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+const { data: notes, refresh } = await useFetch("/api/notes");
+
+const title = ref("");
+const body = ref("");
+
+async function addNote() {
+  await $fetch("/api/notes", {
+    method: "POST",
+    body: { title: title.value, body: body.value },
+  });
+  title.value = "";
+  body.value = "";
+  await refresh();
+}
+
+const cacheKey = ref("greeting");
+const cacheValue = ref("");
+const cacheResult = ref("");
+
+async function saveCacheValue() {
+  await $fetch(`/api/cache/${cacheKey.value}`, {
+    method: "PUT",
+    body: { value: cacheValue.value },
+  });
+}
+
+async function loadCacheValue() {
+  const res = await $fetch(`/api/cache/${cacheKey.value}`);
+  cacheResult.value = res.value ?? "(nothing cached yet)";
+}
+</script>
+
+<template lang="pug">
+main.mx-auto.max-w-xl.p-8.space-y-8
+  h1.text-2xl.font-bold Nuxt Boilerplate
+
+  section.space-y-2
+    h2.text-lg.font-semibold Notes (MySQL via Drizzle)
+    ul.list-disc.list-inside
+      li(v-for="note in notes" :key="note.id") {{ note.title }} - {{ note.body }}
+    form.flex.gap-2(@submit.prevent="addNote")
+      input.border.rounded.px-2.py-1(v-model="title" placeholder="Title")
+      input.border.rounded.px-2.py-1(v-model="body" placeholder="Body")
+      button.bg-blue-600.text-white.px-3.py-1.rounded(type="submit") Add
+
+  section.space-y-2
+    h2.text-lg.font-semibold Cache (Redis)
+    .flex.gap-2
+      input.border.rounded.px-2.py-1(v-model="cacheKey" placeholder="Key")
+      input.border.rounded.px-2.py-1(v-model="cacheValue" placeholder="Value")
+      button.bg-green-600.text-white.px-3.py-1.rounded(type="button" @click="saveCacheValue") Save
+      button.bg-gray-600.text-white.px-3.py-1.rounded(type="button" @click="loadCacheValue") Load
+    p {{ cacheResult }}
+</template>