perf: preconnect to Plausible API host (fixes #42)

johannschopplich · johannschopplich · commit ad715bf17baa · 2025-09-01T14:15:44.000+02:00
diff --git a/playground/app.vue b/playground/app.vue
@@ -1,12 +1,28 @@
 <script setup lang="ts">
-import { navigateTo, useRuntimeConfig, useTrackEvent, useTrackPageview } from '#imports'
+import { navigateTo, useHead, useRuntimeConfig, useTrackEvent, useTrackPageview } from '#imports'
 
 const { plausible } = useRuntimeConfig().public
 
+if (import.meta.server) {
+  useHead({
+    title: '@nuxtjs/plausible',
+    link: [
+      {
+        rel: 'stylesheet',
+        href: 'https://cdn.jsdelivr.net/npm/@exampledev/new.css@1.1.2/new.min.css',
+      },
+    ],
+  })
+}
+
 function trackEvent() {
   useTrackEvent('playground', {
-    props: { action: 'click' },
-    callback: () => console.log('Event tracked'),
+    props: {
+      action: 'click',
+    },
+    callback() {
+      console.log('Event tracked')
+    },
   })
 }
 
@@ -20,14 +36,6 @@ function pushRoute() {
 </script>
 
 <template>
-  <Head>
-    <Title>@nuxtjs/plausible</Title>
-    <Link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1.1.2/new.min.css"
-    />
-  </Head>
-
   <header>
     <h1>@nuxtjs/plausible</h1>
   </header>
diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
@@ -3,7 +3,7 @@ import NuxtPlausible from '../src/module'
 export default defineNuxtConfig({
   modules: [NuxtPlausible],
 
-  compatibilityDate: '2024-04-03',
+  compatibilityDate: '2025-09-01',
 
   plausible: {
     // Enable tracking events on localhost
diff --git a/src/module.ts b/src/module.ts
@@ -208,5 +208,14 @@ export default defineNuxtModule<ModuleOptions>({
         order: 2,
       })
     }
+
+    // Add preconnect link when proxy is not used
+    if (!options.proxy) {
+      addPlugin({
+        src: resolve('runtime/plugin-preconnect.client'),
+        mode: 'client',
+        order: -1, // Run early to add preconnect before other resources
+      })
+    }
   },
 })
diff --git a/src/runtime/plugin-auto-outbound-tracking.client.ts b/src/runtime/plugin-auto-outbound-tracking.client.ts
@@ -1,15 +1,12 @@
 import type { Plausible } from '@barbapapazes/plausible-tracker'
 import type {} from 'nuxt/app'
-import type { ModuleOptions } from '../module'
 import { defineNuxtPlugin, useNuxtApp, useRuntimeConfig } from '#imports'
 import { useAutoOutboundTracking } from '@barbapapazes/plausible-tracker/extensions/auto-outbound-tracking'
 
 export default defineNuxtPlugin({
   name: 'plausible:auto-outbound-tracking',
   setup() {
-    const options = useRuntimeConfig().public
-      .plausible as Required<ModuleOptions>
-
+    const { plausible: options } = useRuntimeConfig().public
     const { $plausible } = useNuxtApp()
 
     if (options.enabled && options.autoOutboundTracking) {
diff --git a/src/runtime/plugin-auto-pageviews.client.ts b/src/runtime/plugin-auto-pageviews.client.ts
@@ -1,15 +1,12 @@
 import type { Plausible } from '@barbapapazes/plausible-tracker'
 import type {} from 'nuxt/app'
-import type { ModuleOptions } from '../module'
 import { defineNuxtPlugin, useNuxtApp, useRuntimeConfig } from '#imports'
 import { useAutoPageviews } from '@barbapapazes/plausible-tracker/extensions/auto-pageviews'
 
 export default defineNuxtPlugin({
   name: 'plausible:auto-pageviews',
   setup() {
-    const options = useRuntimeConfig().public
-      .plausible as Required<ModuleOptions>
-
+    const { plausible: options } = useRuntimeConfig().public
     const { $plausible } = useNuxtApp()
 
     if (options.enabled && options.autoPageviews) {
diff --git a/src/runtime/plugin-preconnect.client.ts b/src/runtime/plugin-preconnect.client.ts
@@ -0,0 +1,21 @@
+import { defineNuxtPlugin, useHead, useRuntimeConfig } from '#imports'
+
+export default defineNuxtPlugin({
+  name: 'plausible:preconnect',
+  setup() {
+    const { plausible: options } = useRuntimeConfig().public
+
+    // Add preconnect to Plausible API host for better performance
+    // Note: This plugin is only loaded when proxy is disabled
+    if (options.enabled && options.apiHost) {
+      useHead({
+        link: [
+          {
+            rel: 'preconnect',
+            href: options.apiHost,
+          },
+        ],
+      })
+    }
+  },
+})
diff --git a/src/runtime/plugin.client.ts b/src/runtime/plugin.client.ts
@@ -1,16 +1,14 @@
-import type { } from 'nuxt/app'
-import type { ModuleOptions } from '../module'
+import type {} from 'nuxt/app'
 import { defineNuxtPlugin, useRuntimeConfig } from '#imports'
 import { createPlausibleTracker } from '@barbapapazes/plausible-tracker'
 
 export default defineNuxtPlugin({
   name: 'plausible',
   setup() {
-    const options = useRuntimeConfig().public.plausible as Required<ModuleOptions>
+    const { plausible: options } = useRuntimeConfig().public
 
-    if (!options.enabled) {
+    if (!options.enabled)
       return
-    }
 
     const plausible = createPlausibleTracker({
       ...options,
