feat(app.vue, nuxt.config.ts, package.json): display build version in…

… UI and automate version generation

Add a build version display to the app's UI to provide users with
information about the current build. Introduce a new script to
automatically generate a build version based on the current date and
time, ensuring each build is uniquely identifiable. The build version
is read from a JSON file and injected into the Nuxt runtime config,
making it accessible in the application. This change enhances
transparency and traceability of deployed versions, aiding in debugging
and user support.

app.vue

@@ -4,6 +4,12 @@
     <p v-if="ip">{{ ip }}</p>
     <p v-else>Loading...</p>
   </div>
+  <div id="app">
+    <NuxtPage />
+    <div class="build-version">
+      Build Version: {{ buildVersion }}
+    </div>
+  </div>
 </template>
 
 <script setup>
@@ -20,6 +26,8 @@ onMounted(async () => {
     console.error("Failed to fetch IP:", error);
   }
 });
+
+const buildVersion = useRuntimeConfig().public.buildVersion;
 </script>
 
 <style>
@@ -32,6 +40,14 @@ onMounted(async () => {
   font-family: Arial, sans-serif;
 }
 
+.build-version {
+  position: fixed;
+  bottom: 10px;
+  right: 10px;
+  font-size: 12px;
+  color: #aaa;
+}
+
 h1 {
   font-size: 2rem;
   margin-bottom: 1rem;

build-version.json

@@ -0,0 +1,3 @@
+{
+  "version": "2024-12-07T19:44:53.790Z"
+}

nuxt.config.ts

@@ -1,5 +1,17 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
+import { readFileSync } from 'fs';
+import { resolve } from 'path';
+
+const buildVersion = JSON.parse(
+  readFileSync(resolve(__dirname, 'build-version.json'), 'utf-8')
+).version;
+
 export default defineNuxtConfig({
   compatibilityDate: '2024-11-01',
-  devtools: { enabled: true }
-})
+  devtools: { enabled: true },
+  runtimeConfig: {
+    public: {
+      buildVersion,
+    },
+  },
+});

package.json

@@ -3,7 +3,8 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "build": "nuxt build",
+    "generate-version": "node scripts/generate-build-version.js",
+    "build": "yarn generate-version && nuxt build",
     "dev": "nuxt dev",
     "generate": "nuxt generate",
     "preview": "nuxt preview",

scripts/generate-build-version.js

@@ -0,0 +1,13 @@
+import { writeFileSync } from "fs";
+import { resolve } from "path";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = resolve(__filename, "..");
+
+const version = new Date().toISOString();
+const outputPath = resolve(__dirname, "../build-version.json");
+
+writeFileSync(outputPath, JSON.stringify({ version }, null, 2));
+
+console.log(`Build version generated: ${version}`);