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