diff --git a/TODO.md b/TODO.md
index 1ee77ba..7ecedda 100644
--- a/TODO.md
+++ b/TODO.md
@@ -7,6 +7,7 @@
 - [ ] deploy
 - [ ] nuxt image
 - [x] prettier and eslint
+- [ ] transition
 - [ ] pwa
 - [ ] seo, robots.txt
 - [ ] update the README
diff --git a/nuxt.config.ts b/nuxt.config.ts
index baa09bd..06f85e7 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -9,4 +9,11 @@ export default defineNuxtConfig({
       autoprefixer: {},
     },
   },
+  runtimeConfig: {
+    // The private keys which are only available server-side
+    apiUrl: process.env.API_URL,
+    // Keys within public are also exposed client-side
+    public: {},
+  },
+  ssr: true,
 });
diff --git a/pages/random.vue b/pages/random.vue
index ebf0889..bc3ae92 100644
--- a/pages/random.vue
+++ b/pages/random.vue
@@ -1,3 +1,15 @@
+<script setup lang="ts">
+const { data, pending, error, refresh } = await useFetch(
+  "https://www.themealdb.com/api/json/v1/1/random.php",
+);
+</script>
+
 <template>
-  <div>random</div>
+  <div>
+    <div v-if="pending">Loading</div>
+    <div v-else-if="error">Failed: {{ error }}</div>
+    <pre v-else>
+      {{ data?.meals?.[0] }}
+    </pre>
+  </div>
 </template>