[Closes #12] Added title and other SEO fields

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>

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>

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>

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>

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

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(),

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,