faetch from api

TODO.md

@@ -7,6 +7,7 @@
 - [ ] deploy
 - [ ] nuxt image
 - [x] prettier and eslint
+- [ ] transition
 - [ ] pwa
 - [ ] seo, robots.txt
 - [ ] update the README

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,
 });

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>