feat: add PostHog analytics integration with configuration in .env and Nuxt setup

Author: TechWatching

.env.example

@@ -1,2 +1,9 @@
 # Public URL, used for OG Image when running nuxt generate
 NUXT_PUBLIC_SITE_URL=
+
+# PostHog Analytics (Europe region)
+# Get your project API key from: https://eu.posthog.com/settings/project
+NUXT_PUBLIC_POSTHOG_PUBLIC_KEY=
+
+# SubmitJSON API Key
+NUXT_PUBLIC_SUBMIT_JSON_API_KEY=

app/plugins/posthog.client.ts

@@ -0,0 +1,30 @@
+import posthog from 'posthog-js'
+
+export default defineNuxtPlugin(() => {
+  const runtimeConfig = useRuntimeConfig()
+  const posthogClient = posthog.init(runtimeConfig.public.posthogPublicKey, {
+    api_host: runtimeConfig.public.posthogHost,
+    person_profiles: 'identified_only',
+    capture_pageview: false, // We'll handle this manually with the router,
+    cookieless_mode: 'always', // Use cookieless mode to avoid cookie consent issues
+    loaded: (posthog) => {
+      if (import.meta.env.MODE === 'development') posthog.debug()
+    }
+  })
+
+  // Track page views with Vue Router
+  const router = useRouter()
+  router.afterEach((to) => {
+    nextTick(() => {
+      posthog.capture('$pageview', {
+        current_url: to.fullPath
+      })
+    })
+  })
+
+  return {
+    provide: {
+      posthog: () => posthogClient
+    }
+  }
+})

nuxt.config.ts

@@ -41,7 +41,9 @@ export default defineNuxtConfig({
 
   runtimeConfig: {
     public: {
-      submitJsonApiKey: ''
+      submitJsonApiKey: '',
+      posthogPublicKey: '',
+      posthogHost: 'https://eu.i.posthog.com'
     }
   },