add seo

components/recipe/index.vue

@@ -26,9 +26,9 @@ defineProps<{ recipe: Recipe }>();
 
     <div class="flex flex-col items-center py-6">
       <h2 class="text-2xl lg:text-3xl font-semibold mb-4">Instructions</h2>
-      <div class="prose prose-lg max-w-none w-full">
+      <p class="prose prose-lg max-w-none w-full">
         {{ recipe.instructions }}
-      </div>
+      </p>
     </div>
   </div>
 </template>

components/recipe/ingredients.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 defineProps<{
-  ingredients: { name: string; quantity: number }[];
+  ingredients: { name: string; quantity: string }[];
 }>();
 </script>
 

nuxt.config.ts

@@ -1,24 +1,38 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
+
+  modules: ["@nuxt/eslint", "@nuxt/image", "nuxt-icon", "nuxt-delay-hydration"],
+
   build: {
     transpile: ["trpc-nuxt"],
   },
+
   css: ["~/assets/css/main.css"],
+
   image: {
     domains: ["www.themealdb.com"],
   },
-  modules: ["@nuxt/eslint", "@nuxt/image", "nuxt-icon"],
+
+  delayHydration: {
+    mode: "init",
+    // enables nuxt-delay-hydration in dev mode for testing
+    debug: process.env.NODE_ENV === "development",
+  },
   postcss: {
     plugins: {
       tailwindcss: {},
       autoprefixer: {},
     },
   },
+
   runtimeConfig: {
     // The private keys which are only available server-side
     apiUrl: "",
     // Keys within public are also exposed client-side
   },
+
   ssr: true,
+  compatibilityDate: "2024-12-13",
 });
+

package.json

@@ -17,7 +17,7 @@
     "@nuxt/image": "^1.6.0",
     "@trpc/client": "^10.45.2",
     "@trpc/server": "^10.45.2",
-    "nuxt": "^3.11.2",
+    "nuxt": "^3.14.1592",
     "nuxt-icon": "^0.6.10",
     "trpc-nuxt": "^0.10.22",
     "vue": "^3.4.21",
@@ -28,6 +28,7 @@
     "@tailwindcss/typography": "^0.5.13",
     "autoprefixer": "^10.4.19",
     "daisyui": "^4.10.2",
+    "nuxt-delay-hydration": "^1.3.8",
     "postcss": "^8.4.38",
     "prettier": "3.2.5",
     "prettier-plugin-tailwindcss": "^0.5.14",

pages/[id].vue

@@ -1,11 +1,24 @@
 <script setup lang="ts">
+useHead({
+  htmlAttrs: {
+    lang: "en",
+  },
+  link: [
+    {
+      rel: "icon",
+      type: "image/png",
+      href: "/favicon.png",
+    },
+  ],
+});
+
 const { params } = useRoute();
 const routeParam = params.id;
 
 const id =
   typeof routeParam === "string" ? Number(routeParam) : Number(routeParam[0]);
 
-const { data: recipe, pending, error } = await useRecipeById(id);
+const { data: recipe, status, error } = await useRecipeById(id);
 
 if (error.value) {
   let statusCode = 400;
@@ -22,10 +35,23 @@ if (error.value) {
     message: error.value.message,
   });
 }
+const url = useRequestURL();
+useSeoMeta({
+  title: `${recipe.value!.title} | Mood2Food`,
+  description: "The perfect meal that fits your mood",
+  ogTitle: `${recipe.value!.title} | Mood2Food`,
+  ogDescription: "The perfect meal that fits your mood",
+  ogImage: recipe.value!.pictureUrl,
+  ogUrl: url.href,
+  twitterTitle: `${recipe.value!.title} | Mood2Food`,
+  twitterDescription: "The perfect meal that fits your mood",
+  twitterImage: recipe.value!.pictureUrl,
+  twitterCard: "summary",
+});
 </script>
 
 <template>
-  <div v-if="pending">Loading</div>
+  <div v-if="status !== 'success'">Loading</div>
   <section v-else>
     <Recipe :recipe="recipe!" />
   </section>

tailwind.config.js

@@ -14,5 +14,6 @@ export default {
   plugins: [require("@tailwindcss/typography"), require("daisyui")],
   daisyui: {
     themes: ["cupcake"],
+    logs: false,
   },
 };

types/id.ts

@@ -1,6 +0,0 @@
-import { z } from "zod";
-
-export const idSchema = z.string({
-  required_error: "recipe id is required",
-  invalid_type_error: "recipe id must be a number",
-});