1<script setup lang="ts">
2useHead({ title: "Nuxt on Neon" });
3
4const greeting = useState("greeting", () =>
5 import.meta.server ? (process.env.GREETING ?? "Hello!") : "Hello!",
6);
7const count = ref(0);
8const responseGreeting = ref("");
9
10async function loadGreeting() {
11 try {
12 const result = await $fetch<{ greeting: string }>(
13 "/api/hello?name=browser",
14 );
15 responseGreeting.value = result.greeting;
16 } catch {
17 responseGreeting.value = "Could not load the greeting. Try again.";
18 }
19}
20</script>
21
22<template>
23 <main>
24 <h1 class="text-3xl font-bold">{{ greeting }}</h1>
25 <Card
26 title="Styled with Tailwind CSS"
27 body="This card is a Vue component styled with Tailwind utilities."
28 />
29 <button type="button" @click="count++">count: {{ count }}</button>
30 <button type="button" @click="loadGreeting">Load greeting</button>
31 <p role="status">{{ responseGreeting }}</p>
32 <NuxtLink class="mt-4 inline-block underline" to="/about"
33 >about (prerendered)</NuxtLink
34 >
35 </main>
36</template>