feat: Added Footer

nuxt.config.ts

@@ -1,4 +1,6 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
+import pkg from './package.json'
+
 export default defineNuxtConfig({
   srcDir: 'nuxt/',
 
@@ -76,6 +78,8 @@ export default defineNuxtConfig({
       apiBase: process.env.API_URL,
       apiPrefix: '/api/v1',
       storageBase: `${process.env.API_URL}/storage/`,
+      packageVersion: pkg.version,
+      gitHash: process.env.GIT_HASH,
       providers: {
         google: {
           name: 'Google',

nuxt/app.vue

@@ -2,9 +2,12 @@
 </script>
 
 <template>
+  <UMain>
     <NuxtLayout>
       <NuxtPage />
     </NuxtLayout>
+  </UMain>
+  <Footer />
 
   <UNotifications />
 </template>

nuxt/components/Footer.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+const config = useRuntimeConfig()
+</script>
+
+<template>
+  <div>
+    <UDivider />
+    <UFooter c>
+      <template #left>
+        <div class="text-xs">
+          Copyright © {{ new Date().getFullYear() }}
+        </div>
+      </template>
+      <template #center>
+        Made with ❤️ by <a class="text-primary hover:text-primary-600 ml-1" href="https://flycro.me" target="_blank">Flycro</a>
+      </template>
+      <template #right>
+        <div class="font-mono text-xs">
+          {{ config.public.packageVersion }} - {{ config.public.gitHash }}
+        </div>
+      </template>
+    </UFooter>
+  </div>
+</template>

package.json

@@ -1,12 +1,13 @@
 {
   "name": "laravel-nuxt",
+  "version": "0.0.4",
   "private": true,
   "type": "module",
   "scripts": {
     "serve": "cross-env PORT=3000 HOST=127.0.0.1 node .output/server/index.mjs",
-    "build": "nuxi cleanup && nuxi build",
+    "build": "GIT_HASH=`git rev-parse --short HEAD` nuxi cleanup && nuxi build",
     "cleanup": "nuxi cleanup",
-    "dev": "nuxt dev --port=3000 --host=127.0.0.1",
+    "dev": "GIT_HASH=`git rev-parse --short HEAD` nuxt dev --port=3000 --host=127.0.0.1",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",