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-if="currentYear === 2025" class="bg-muted/50 flex-1 rounded-xl p-2 text-center">
-        <div v-else class="bg-muted/50 flex-1 rounded-xl p-2 text-center">Glowing Fiesta 2025 - {{ currentYear }}</div>
+          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>

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: {

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

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