Add visitors

app/app.vue

@@ -44,6 +44,7 @@ const head = useLocaleHead({
         <AppBackground />
         <UContainer class="z-50 relative">
           <AppHeader />
+          <AppVisitors />
           <NuxtPage class="mt-12" />
           <AppFooter />
         </UContainer>

app/components/AppVisitors.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const { isLoading, visitors } = useVisitors()
+</script>
+
+<template>
+  <div class="fixed bottom-4 right-8">
+    <UTooltip text="Visitors currently on my portfolio" placement="left">
+      <nav v-if="!isLoading" class="text-xs flex space-x-1 items-center border border-green-400 dark:border-green-600 px-2 rounded-xl">
+        <div>{{ visitors }}</div>
+        <div class="h-3 w-3 bg-green-200 dark:bg-green-600 rounded-full border-2 border-green-400 dark:border-green-800" />
+      </nav>
+    </UTooltip>
+  </div>
+</template>

nuxt.config.ts

@@ -21,6 +21,7 @@ export default defineNuxtConfig({
     '@nuxt/image',
     '@nuxtjs/i18n',
     'nuxt-mapbox',
+    'nuxt-visitors',
   ],
 
   // Nuxt Hub
@@ -153,4 +154,4 @@ export default defineNuxtConfig({
   },
 
   compatibilityDate: '2024-08-19',
-})
+})

package.json

@@ -22,6 +22,7 @@
     "drizzle-orm": "^0.33.0",
     "h3-zod": "^0.5.3",
     "nuxt": "^3.13.2",
+    "nuxt-visitors": "^1.1.2",
     "rehype-katex": "^7.0.1",
     "remark-math": "^6.0.0",
     "remark-parse": "^11.0.0",