Feat: Debug memory usage (#9)

app/app.vue

@@ -1,7 +1,10 @@
 <template>
   <!--  <Login v-if="!credentials" />-->
-  <div class="h-dvh">
+  <div class="relative h-dvh">
     <NuxtPage :page-key="route.fullPath" />
+    <DebugMemory
+      v-if="IS_DEV_MODE && config.public.debugMemoryUsage"
+      class="absolute bottom-0 flex w-full items-center justify-center gap-4 pb-6 text-xs text-gray-600" />
   </div>
   <Toaster />
   <ConfirmationDialog v-if="confirmationDialog" v-bind="confirmationDialog" />
@@ -15,6 +18,8 @@ import { useConfirmationDialog } from '~/stores'
 
 const route = useRoute()
 const { confirmationDialog } = safeToRefs(useConfirmationDialog())
+const IS_DEV_MODE = import.meta.dev
+const config = useRuntimeConfig()
 
 useHead({
   htmlAttrs: {

app/components/debug/DebugMemory.vue

@@ -0,0 +1,27 @@
+<template>
+  <div v-if="isSupported && memory">
+    <template v-if="memory">
+      <div>Used</div>
+      <div class="text-right">{{ size(memory.usedJSHeapSize) }}</div>
+
+      <div>Allocated</div>
+      <div class="text-right">{{ size(memory.totalJSHeapSize) }}</div>
+
+      <div>Limit</div>
+      <div class="text-right">{{ size(memory.jsHeapSizeLimit) }}</div>
+    </template>
+  </div>
+  <div v-else class="text-xs italic text-gray-600">
+    Performance memory API not supported
+  </div>
+</template>
+
+<script setup>
+import { useMemory } from '@vueuse/core'
+
+const size = (v) => {
+  const kb = v / 1024 / 1024
+  return `${kb.toFixed(2)} MB`
+}
+const { isSupported, memory } = useMemory()
+</script>

nuxt.config.ts

@@ -4,10 +4,13 @@ export default defineNuxtConfig({
   future: {
     compatibilityVersion: 4,
   },
-
   ssr: false,
   devtools: { enabled: true },
-
+  runtimeConfig: {
+    public: {
+      debugMemoryUsage: false,
+    },
+  },
   modules: [
     '@pinia/nuxt',
     'nuxt-icon',
@@ -28,6 +31,5 @@ export default defineNuxtConfig({
       },
     ],
   ],
-
   compatibilityDate: '2024-08-15',
 })