feat!: plausible script updates

docs/content/scripts/analytics/plausible-analytics.md

@@ -25,7 +25,10 @@ export default defineNuxtConfig({
   scripts: {
     registry: {
       plausibleAnalytics: {
-        domain: 'YOUR_DOMAIN'
+        // Get this from your Plausible script URL:
+        // https://plausible.io/js/pa-gYyxvZhkMzdzXBAtSeSNz.js
+        //                         ^^^^^^^^^^^^^^^^^^^^^^^^^^
+        scriptId: 'gYyxvZhkMzdzXBAtSeSNz'
       }
     }
   }
@@ -38,7 +41,7 @@ export default defineNuxtConfig({
     scripts: {
       registry: {
         plausibleAnalytics: {
-          domain: 'YOUR_DOMAIN',
+          scriptId: 'YOUR_SCRIPT_ID',
         }
       }
     }
@@ -59,8 +62,8 @@ export default defineNuxtConfig({
       scripts: {
         plausibleAnalytics: {
           // .env
-          // NUXT_PUBLIC_SCRIPTS_PLAUSIBLE_ANALYTICS_DOMAIN=<your-domin>
-          domain: ''
+          // NUXT_PUBLIC_SCRIPTS_PLAUSIBLE_ANALYTICS_SCRIPT_ID=<your-script-id>
+          scriptId: ''
         },
       },
     },
@@ -75,8 +78,11 @@ export default defineNuxtConfig({
 The `useScriptPlausibleAnalytics` composable lets you have fine-grain control over when and how Plausible Analytics is loaded on your site.
 
 ```ts
+// New October 2025 format
 const plausible = useScriptPlausibleAnalytics({
-  domain: 'YOUR_DOMAIN'
+  // Extract from: https://plausible.io/js/pa-gYyxvZhkMzdzXBAtSeSNz.js
+  //                                         ^^^^^^^^^^^^^^^^^^^^^^^^^^
+  scriptId: 'gYyxvZhkMzdzXBAtSeSNz'
 })
 ```
 
@@ -112,10 +118,63 @@ export interface PlausibleAnalyticsApi {
 You must provide the options when setting up the script for the first time.
 
 ```ts
-export const PlausibleAnalyticsOptions = object({
-  domain: string(), // required
-  extension: optional(union([union(extensions), array(union(extensions))])),
-})
+export interface PlausibleAnalyticsOptions {
+  /**
+   * Unique script ID for your site (recommended - new format as of October 2025)
+   * Extract from: <script src="https://plausible.io/js/pa-{scriptId}.js"></script>
+   */
+  scriptId?: string
+  /** Custom properties to track with every pageview */
+  customProperties?: Record<string, any>
+  /** Custom tracking endpoint URL */
+  endpoint?: string
+  /** Configure file download tracking */
+  fileDownloads?: {
+    fileExtensions?: string[]
+  }
+  /** Enable hash-based routing for single-page apps */
+  hashBasedRouting?: boolean
+  /** Set to false to manually trigger pageviews */
+  autoCapturePageviews?: boolean
+  /** Enable tracking on localhost */
+  captureOnLocalhost?: boolean
+  /** Enable form submission tracking */
+  trackForms?: boolean
+}
+```
+
+```ts
+export interface PlausibleAnalyticsDeprecatedOptions {
+  /**
+   * Your site domain
+   * @deprecated Use `scriptId` instead (new October 2025 format)
+   */
+  domain?: string
+  /**
+   * Script extensions for additional features
+   * @deprecated Use init options like `hashBasedRouting`, `captureOnLocalhost`, etc. instead
+   */
+  extension?: 'hash' | 'outbound-links' | 'file-downloads' | 'tagged-events' | 'revenue' | 'pageview-props' | 'compat' | 'local' | 'manual'
+}
+
+```
+
+**Note:** The `scriptId` is found in your Plausible dashboard under **Site Installation** in your site settings.
+
+**Extracting your Script ID:**
+
+Plausible provides you with a script tag like this:
+
+```html
+<script async src="https://plausible.io/js/pa-gYyxvZhkMzdzXBAtSeSNz.js"></script>
+```
+
+Your `scriptId` is the part after `pa-` and before `.js`:
+
+```ts
+scriptId: 'gYyxvZhkMzdzXBAtSeSNz'
+//         ^^^^^^^^^^^^^^^^^^^^^^^
+//         Extract from: pa-{scriptId}.js
 ```
 
 ## Example

playground/pages/index.vue

@@ -71,6 +71,12 @@ const analytics = registryScripts
       logo: registryScripts.find(s => s.label === 'Google Analytics')?.logo,
       registryScript: null,
     },
+    {
+      name: 'Plausible Analytics v2 (Oct 2025)',
+      path: '/third-parties/plausible-analytics-v2',
+      logo: registryScripts.find(s => s.label === 'Plausible Analytics')?.logo,
+      registryScript: null,
+    },
   ])
 
 const pixels = registryScripts

playground/pages/third-parties/plausible-analytics-v2.vue

@@ -0,0 +1,73 @@
+<script lang="ts" setup>
+import { ref, useHead } from '#imports'
+
+useHead({
+  title: 'Plausible v2',
+})
+
+// New October 2025 format with scriptId
+const { status, proxy } = useScriptPlausibleAnalytics({
+  scriptId: 'gYyxvZhkMzdzXBAtSeSNz',
+  captureOnLocalhost: true,
+  scriptOptions: {
+    trigger: 'onNuxtReady',
+  },
+})
+
+const clicks = ref(0)
+
+function trackPageView() {
+  proxy.plausible('404', { props: { path: '/404' } })
+}
+
+async function clickHandler() {
+  clicks.value++
+  proxy.plausible('test', { props: { clicks: clicks.value } })
+}
+</script>
+
+<template>
+  <div class="space-y-6">
+    <div>
+      <h1 class="text-3xl font-bold">
+        Plausible Analytics v2 (October 2025)
+      </h1>
+      <p class="text-gray-600 mt-2">
+        New format with unique script ID and plausible.init() configuration.
+      </p>
+    </div>
+
+    <div class="space-y-4">
+      <div>
+        <span class="font-medium">Status:</span>
+        <span class="ml-2 px-2 py-1 rounded text-sm" :class="status === 'loaded' ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-700'">
+          {{ status }}
+        </span>
+      </div>
+
+      <div class="bg-blue-50 border border-blue-200 rounded p-4">
+        <h3 class="font-semibold mb-2">
+          Configuration
+        </h3>
+        <pre class="text-xs bg-white p-2 rounded overflow-x-auto">scriptId: 'gYyxvZhkMzdzXBAtSeSNz'
+captureOnLocalhost: true</pre>
+      </div>
+
+      <div class="flex gap-3">
+        <UButton
+          :disabled="status !== 'loaded'"
+          @click="trackPageView"
+        >
+          Track 404 Page View
+        </UButton>
+
+        <UButton
+          :disabled="status !== 'loaded'"
+          @click="clickHandler"
+        >
+          Track Custom Event ({{ clicks }})
+        </UButton>
+      </div>
+    </div>
+  </div>
+</template>

playground/pages/third-parties/plausible-analytics.vue

@@ -6,13 +6,20 @@ useHead({
 })
 
 // composables return the underlying api as a proxy object and the script state
+// Using legacy domain format for playground - in production use scriptId instead
 const { status, proxy } = useScriptPlausibleAnalytics({
   domain: 'scripts.nuxt.com',
-  extension: 'local',
+  captureOnLocalhost: true, // New October 2025 init option
   scriptOptions: {
     trigger: 'onNuxtReady',
   },
 })
+// Example with new scriptId format:
+// const { status, proxy } = useScriptPlausibleAnalytics({
+//   scriptId: 'YOUR_SCRIPT_ID', // Get from Plausible dashboard
+//   captureOnLocalhost: true,
+//   scriptOptions: { trigger: 'onNuxtReady' },
+// })
 
 const clicks = ref(0)