1<script setup lang="ts">
2// Title lives on the page so the dev test's hot-reload marker rewrite
3// targets this file.
4useHead({ title: "Nuxt on Railway" });
5
6// SSR reads the Railway Service environment through the plain Node contract:
7// `process.env`. `useState` serializes the server-read value into the
8// payload so the client render matches.
9const greeting = useState("greeting", () => {
10 if (import.meta.server) {
11 return typeof process.env.GREETING === "string"
12 ? process.env.GREETING
13 : "Hello!";
14 }
15 return "Hello!";
16});
17</script>
18
19<template>
20 <main>
21 <h1 class="text-3xl font-bold">{{ greeting }}</h1>
22 <Card
23 title="Styled with Tailwind CSS"
24 body="This card is a Vue component styled with Tailwind utilities."
25 />
26 <NuxtLink class="mt-4 inline-block underline" to="/about"
27 >about (prerendered)</NuxtLink
28 >
29 </main>
30</template>