Merge pull request #35 from buggregator/issue/#19-app-version

Issue/#19 app version

Author: Kreezag

.env.sample

@@ -1,2 +1,2 @@
-VITE_EVENTS_REST_API=https://test.buggregator.dev/
-VITE_EVENTS_WS_API=wss://test.buggregator.dev/connection/websocket
+VITE_EVENTS_REST_API=https://test.buggregator.dev
+VITE_EVENTS_WS_API=wss://test.buggregator.dev/connection/websocket

components/LayoutSidebar/LayoutSidebar.vue

@@ -17,7 +17,11 @@
         <IconSvg class="layout-sidebar__link-icon" name="smtp" />
       </NuxtLink>
 
-      <NuxtLink to="/http-dumps" title="Http dumps" class="layout-sidebar__link">
+      <NuxtLink
+        to="/http-dumps"
+        title="Http dumps"
+        class="layout-sidebar__link"
+      >
         <IconSvg class="layout-sidebar__link-icon" name="http-dumps" />
       </NuxtLink>
 
@@ -32,13 +36,18 @@
       <NuxtLink to="/settings" title="Settings" class="layout-sidebar__link">
         <IconSvg class="layout-sidebar__link-icon" name="settings" />
       </NuxtLink>
+
+      <div v-if="appVersion" class="layout-sidebar__nav-version">
+        {{ appVersion }}
+      </div>
     </nav>
   </aside>
 </template>
 
 <script lang="ts">
 import IconSvg from "~/components/IconSvg/IconSvg.vue";
 import { defineComponent } from "vue";
+import { useNuxtApp } from "#app";
 
 export default defineComponent({
   components: { IconSvg },
@@ -48,6 +57,22 @@ export default defineComponent({
       required: true,
     },
   },
+  setup() {
+    if (process.client) {
+      const { $config } = useNuxtApp();
+
+      return {
+        appVersion:
+          !$config?.version || $config.version === "0.0.1"
+            ? "@dev"
+            : `v${$config.version}`,
+      };
+    }
+
+    return {
+      appVersion: "@dev",
+    };
+  },
 });
 </script>
 
@@ -57,7 +82,7 @@ export default defineComponent({
 }
 
 .layout-sidebar__nav {
-  @apply divide-y divide-gray-300 dark:divide-gray-600 sticky top-0;
+  @apply divide-y divide-gray-300 dark:divide-gray-600 sticky top-0 h-screen max-h-screen;
 }
 
 .layout-sidebar__link {
@@ -68,6 +93,10 @@ export default defineComponent({
   }
 }
 
+.layout-sidebar__nav-version {
+  @apply flex justify-center text-xs dark:text-gray-400 p-2 absolute bottom-0 left-0 right-0;
+}
+
 .layout-sidebar__link-icon {
   @apply fill-current;
 }

nuxt.config.ts

@@ -1,4 +1,6 @@
 import {defineNuxtConfig} from "nuxt/config";
+import pkg from './package.json';
+
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   target: 'static',
@@ -55,4 +57,9 @@ export default defineNuxtConfig({
     host: '127.0.0.1',
     url: 'http://127.0.0.1:3000',
   },
+  runtimeConfig: {
+    public: {
+      version: pkg.version,
+    }
+  }
 });