From 52b255df65b92c1a245d21eafaa09d84a9dff4a3 Mon Sep 17 00:00:00 2001
From: Liviu Burcusel <x.liviu@gmail.com>
Date: Wed, 24 Dec 2025 11:14:03 +0100
Subject: [PATCH] Added runtimeConfig and used it for appVersion in the footer

---
 app/layouts/Default.vue       | 12 ++++++++++--
 nuxt.config.ts                |  9 +++++++++
 tests/layouts/Default.test.ts | 12 ++++++++++--
 vitest.config.ts              |  1 +
 4 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/app/layouts/Default.vue b/app/layouts/Default.vue
index a22ffae..acbbf12 100644
--- a/app/layouts/Default.vue
+++ b/app/layouts/Default.vue
@@ -14,7 +14,11 @@ import {
 
 import { Separator } from "~/components/ui/separator";
 
+import { useRuntimeConfig } from "#app";
+
 const currentYear = new Date().getFullYear();
+
+const config = useRuntimeConfig();
 </script>
 
 <template>
@@ -40,8 +44,12 @@ const currentYear = new Date().getFullYear();
         <slot />
       </main>
       <footer class="flex h-12 shrink-0 items-center gap-2 border-b px-4" data-testid="footer">
-        <div v-if="currentYear === 2025" class="bg-muted/50 flex-1 rounded-xl p-2 text-center">Glowing Fiesta 2025</div>
-        <div v-else class="bg-muted/50 flex-1 rounded-xl p-2 text-center">Glowing Fiesta 2025 - {{ currentYear }}</div>
+        <div v-if="currentYear === 2025" class="bg-muted/50 flex-1 rounded-xl p-2 text-center">
+          Glowing Fiesta 2025 <span class="text-muted-foreground">({{ config.public.appVersion }})</span>
+        </div>
+        <div v-else class="bg-muted/50 flex-1 rounded-xl p-2 text-center">
+          Glowing Fiesta 2025 - {{ currentYear }} <span class="text-muted-foreground">({{ config.public.appVersion }})</span>
+        </div>
       </footer>
     </SidebarInset>
   </SidebarProvider>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 8338ef3..8394956 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,8 +1,17 @@
+import { readFileSync } from "fs";
+import { resolve } from "path";
 import tailwindcss from "@tailwindcss/vite";
 
+const packageJsonContent = JSON.parse(readFileSync(resolve(__dirname, "package.json"), "utf-8"));
+
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   compatibilityDate: "2025-07-15",
+  runtimeConfig: {
+    public: {
+      appVersion: packageJsonContent.version,
+    },
+  },
   app: {
     head: {
       htmlAttrs: {
diff --git a/tests/layouts/Default.test.ts b/tests/layouts/Default.test.ts
index b3257b9..d29140e 100644
--- a/tests/layouts/Default.test.ts
+++ b/tests/layouts/Default.test.ts
@@ -2,6 +2,14 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 import { mount } from "@vue/test-utils";
 import DefaultLayout from "~/layouts/Default.vue";
 
+vi.mock("#app", () => ({
+  useRuntimeConfig: () => ({
+    public: {
+      appVersion: "1.0.1",
+    },
+  }),
+}));
+
 describe("Default.vue", () => {
   afterEach(() => {
     vi.useRealTimers();
@@ -24,7 +32,7 @@ describe("Default.vue", () => {
       vi.setSystemTime(new Date(2025, 0, 1));
       const wrapper = mount(DefaultLayout);
       const footer = wrapper.find("[data-testid='footer']");
-      expect(footer.text()).toBe("Glowing Fiesta 2025");
+      expect(footer.text()).toBe("Glowing Fiesta 2025 (1.0.1)");
     });
 
     it("footer shows range when current year is not 2025", () => {
@@ -32,7 +40,7 @@ describe("Default.vue", () => {
       vi.setSystemTime(new Date(2069, 0, 1));
       const wrapper = mount(DefaultLayout);
       const footer = wrapper.find("[data-testid='footer']");
-      expect(footer.text()).toBe("Glowing Fiesta 2025 - 2069");
+      expect(footer.text()).toBe("Glowing Fiesta 2025 - 2069 (1.0.1)");
     });
   });
 });
diff --git a/vitest.config.ts b/vitest.config.ts
index 4bdb98f..8d82bf9 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -43,6 +43,7 @@ export default defineConfig({
     alias: {
       "~": fileURLToPath(new URL("./app", import.meta.url)),
       "@": fileURLToPath(new URL("./app", import.meta.url)),
+      "#app": fileURLToPath(new URL("./.nuxt/types/imports.d.ts", import.meta.url)),
     },
   },
 });