From 845f830ab3e354e8e2ac5c5b327d5bb6461c4e4b Mon Sep 17 00:00:00 2001
From: Liviu Burcusel <x.liviu@gmail.com>
Date: Mon, 12 Jan 2026 17:01:51 +0100
Subject: [PATCH] [Closes #12] Added title and other SEO fields

---
 app/pages/auth/create-account.vue | 10 ++++++++++
 app/pages/auth/login.vue          | 10 ++++++++++
 app/pages/auth/logout.vue         | 10 ++++++++++
 app/pages/index.vue               | 12 ++++++++++++
 nuxt.config.ts                    |  3 ++-
 tests/layouts/Default.test.ts     |  8 --------
 tests/setup.ts                    | 12 ++++++++++++
 7 files changed, 56 insertions(+), 9 deletions(-)

diff --git a/app/pages/auth/create-account.vue b/app/pages/auth/create-account.vue
index cecf990..76f5286 100644
--- a/app/pages/auth/create-account.vue
+++ b/app/pages/auth/create-account.vue
@@ -1,9 +1,19 @@
 <script setup lang="ts">
+import { useRuntimeConfig, useSeoMeta } from "#app";
 import { useBreadcrumbStore } from "~/stores/breadcrumbs";
 import SignupForm from "@/components/SignupForm.vue";
 
 const breadcrumbStore = useBreadcrumbStore();
 breadcrumbStore.setBreadcrumbs([{ label: "Auth" }, { label: "Create Account", to: "/auth/create-account" }]);
+
+const config = useRuntimeConfig();
+useSeoMeta({
+  title: "Glowing Fiesta - Create Account",
+  ogTitle: "Glowing Fiesta - Create Account",
+  description: "This is the create account page of a very nice all-purpose application",
+  ogDescription: "This is the create account page of a very nice all-purpose application",
+  ogImage: config.public.hostUrl + "/images/human.png",
+});
 </script>
 
 <template>
diff --git a/app/pages/auth/login.vue b/app/pages/auth/login.vue
index fb41d63..9a867e9 100644
--- a/app/pages/auth/login.vue
+++ b/app/pages/auth/login.vue
@@ -1,9 +1,19 @@
 <script setup lang="ts">
+import { useRuntimeConfig, useSeoMeta } from "#app";
 import { useBreadcrumbStore } from "~/stores/breadcrumbs";
 import LoginForm from "~/components/LoginForm.vue";
 
+const config = useRuntimeConfig();
 const breadcrumbStore = useBreadcrumbStore();
 breadcrumbStore.setBreadcrumbs([{ label: "Auth" }, { label: "Login", to: "/auth/login" }]);
+
+useSeoMeta({
+  title: "Glowing Fiesta - Login",
+  ogTitle: "Glowing Fiesta - Login",
+  description: "This is the login page of a very nice all-purpose application",
+  ogDescription: "This is the login page of a very nice all-purpose application",
+  ogImage: config.public.hostUrl + "/images/human.png",
+});
 </script>
 
 <template>
diff --git a/app/pages/auth/logout.vue b/app/pages/auth/logout.vue
index 8227e51..3d073f1 100644
--- a/app/pages/auth/logout.vue
+++ b/app/pages/auth/logout.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useRuntimeConfig, useSeoMeta } from "#app";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Field, FieldDescription } from "@/components/ui/field";
@@ -11,6 +12,15 @@ await authStore.init();
 
 const breadcrumbStore = useBreadcrumbStore();
 breadcrumbStore.setBreadcrumbs([{ label: "Auth" }, { label: "Logout", to: "/auth/logout" }]);
+
+const config = useRuntimeConfig();
+useSeoMeta({
+  title: "Glowing Fiesta - Logout",
+  ogTitle: "Glowing Fiesta - Logout",
+  description: "This is the logout page of a very nice all-purpose application",
+  ogDescription: "This is the logout page of a very nice all-purpose application",
+  ogImage: config.public.hostUrl + "/images/human.png",
+});
 </script>
 
 <template>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 65c5c37..76fe845 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -3,6 +3,10 @@ import { ref } from "vue";
 import { useBreadcrumbStore } from "~/stores/breadcrumbs";
 import { Button } from "@/components/ui/button";
 
+import { useRuntimeConfig, useSeoMeta } from "#app";
+
+const config = useRuntimeConfig();
+
 const lastClicked = ref<string>("None");
 
 const buttonClicked = (variant: string) => {
@@ -11,6 +15,14 @@ const buttonClicked = (variant: string) => {
 
 const breadcrumbStore = useBreadcrumbStore();
 breadcrumbStore.setBreadcrumbs([{ label: "Homepage", to: "/" }]);
+
+useSeoMeta({
+  title: "Glowing Fiesta - Homepage",
+  ogTitle: "Glowing Fiesta - Homepage",
+  description: "This is the homepage of a very nice all-purpose application",
+  ogDescription: "This is the homepage of a very nice all-purpose application",
+  ogImage: config.public.hostUrl + "/images/human.png",
+});
 </script>
 
 <template>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 4b8c3f6..68ac745 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,7 +1,7 @@
 import { readFileSync } from "fs";
 import { resolve } from "path";
 import tailwindcss from "@tailwindcss/vite";
-import "./shared/utils/env";
+import env from "./shared/utils/env";
 
 const packageJsonContent = JSON.parse(readFileSync(resolve(__dirname, "package.json"), "utf-8"));
 
@@ -10,6 +10,7 @@ export default defineNuxtConfig({
   compatibilityDate: "2025-07-15",
   runtimeConfig: {
     public: {
+      hostUrl: env.BETTER_AUTH_URL,
       appVersion: packageJsonContent.version,
     },
   },
diff --git a/tests/layouts/Default.test.ts b/tests/layouts/Default.test.ts
index 205da66..b01f368 100644
--- a/tests/layouts/Default.test.ts
+++ b/tests/layouts/Default.test.ts
@@ -2,14 +2,6 @@ import { afterEach, describe, expect, it, vi, beforeAll, afterAll } from "vitest
 import { mount, flushPromises } from "@vue/test-utils";
 import DefaultLayout from "~/layouts/Default.vue";
 
-vi.mock("#app", () => ({
-  useRuntimeConfig: () => ({
-    public: {
-      appVersion: "1.0.1",
-    },
-  }),
-}));
-
 vi.mock("~/stores/auth", () => ({
   useAuthStore: () => ({
     init: vi.fn(),
diff --git a/tests/setup.ts b/tests/setup.ts
index 7cffe5c..62c1660 100644
--- a/tests/setup.ts
+++ b/tests/setup.ts
@@ -18,6 +18,7 @@ Object.defineProperty(global, "import", {
   writable: true,
 });
 
+// Mock for breadcrumb store
 const breadcrumbStoreMocks = vi.hoisted(() => ({
   setBreadcrumbs: vi.fn(),
   addBreadcrumb: vi.fn(),
@@ -28,6 +29,17 @@ vi.mock("~/stores/breadcrumbs", () => ({
   useBreadcrumbStore: () => breadcrumbStoreMocks,
 }));
 
+// Mock for #app
+vi.mock("#app", () => ({
+  useRuntimeConfig: () => ({
+    public: {
+      appVersion: "1.0.1",
+      hostUrl: "http://localhost:3000",
+    },
+  }),
+  useSeoMeta: () => {},
+}));
+
 config.global.stubs = {
   NuxtLayout: true,
   NuxtPage: true,