Plausible Analytics

Plausible Analytics is a privacy-friendly analytics solution for Nuxt Apps, allowing you to track your website's traffic without compromising your users' privacy.

The simplest way to load Plausible Analytics globally in your Nuxt App is to use Nuxt config. Alternatively you can directly use the useScriptPlausibleAnalytics composable.

Loading Globally

If you don't plan to send custom events you can use the Environment overrides to disable the script in development.

export default defineNuxtConfig({
  scripts: {
    registry: {
      plausibleAnalytics: {
        domain: 'YOUR_DOMAIN'
      }
    }
  }
})

useScriptPlausibleAnalytics

The useScriptPlausibleAnalytics composable lets you have fine-grain control over when and how Plausible Analytics is loaded on your site.

const plausible = useScriptPlausibleAnalytics({
  domain: 'YOUR_DOMAIN'
})

Please follow the Registry Scripts guide to learn more about advanced usage.

Self-hosted Plausible

If you are using a self-hosted version of Plausible, you will need to provide an explicit src for the script so that the API events are sent to the correct endpoint.

useScriptPlausibleAnalytics({
  scriptInput: {
    src: 'https://my-self-hosted-plausible.io/js/script.js'
  }
})

PlausibleAnalyticsApi

export interface PlausibleAnalyticsApi {
  plausible: ((event: '404', options: Record<string, any>) => void) &
  ((event: 'event', options: Record<string, any>) => void) &
  ((...params: any[]) => void) & {
    q: any[]
  }
}

Config Schema

You must provide the options when setting up the script for the first time.

export const PlausibleAnalyticsOptions = object({
  domain: string(), // required
  extension: optional(union([union(extensions), array(union(extensions))])),
})

Example

Using Plausible Analytics only in production while using plausible to send a conversion event.

<script setup lang="ts">
const { proxy } = useScriptPlausibleAnalytics()

// noop in development, ssr
// just works in production, client
proxy.plausible('event', { name: 'conversion-step' })
function sendConversion() {
  proxy.plausible('event', { name: 'conversion' })
}
</script>

<template>
  <div>
    <button @click="sendConversion">
      Send Conversion
    </button>
  </div>
</template>