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.
Nuxt Config Setup
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.
export default defineNuxtConfig({
scripts: {
registry: {
plausibleAnalytics: {
domain: 'example.com'
}
}
}
})useScriptPlausibleAnalytics()
The useScriptPlausibleAnalytics composable lets you have fine-grain control over when and how Plausible Analytics is loaded on your site.
const { proxy } = useScriptPlausibleAnalytics()
proxy.plausible('conversion', { props: { value: 1 } })Please follow the Registry Scripts guide to learn more about advanced usage.
First-Party Mode
This script supports First-Party Mode which routes all traffic through your domain for improved privacy and ad blocker bypass.
export default defineNuxtConfig({
scripts: {
firstParty: true,
registry: {
plausibleAnalytics: { domain: 'example.com'}
}
}
})Example
Using Plausible Analytics only in production while using the proxy to send events.
<script setup lang="ts">
const { proxy } = useScriptPlausibleAnalytics()
// noop in development, ssr
// just works in production, client
function handleAction() {
proxy.plausible('conversion', { props: { value: 1 } })
}
</script>
<template>
<div>
<button @click="handleAction">
Send Event
</button>
</div>
</template>Self-hosted Plausible
If you use a self-hosted version of Plausible, provide an explicit src for the script so that the browser sends API events to the correct endpoint.
useScriptPlausibleAnalytics({
scriptInput: {
src: 'https://my-self-hosted-plausible.io/js/script.js'
}
})
Note: Find the scriptId in your Plausible dashboard under Site Installation in your site settings.
Extracting your Script ID:
Plausible provides you with a script tag like this:
<script async src="https://plausible.io/js/pa-gYyxvZhkMzdzXBAtSeSNz.js"></script>
Your scriptId is the part after pa- and before .js:
scriptId: 'gYyxvZhkMzdzXBAtSeSNz'
// ^^^^^^^^^^^^^^^^^^^^^^^
// Extract from: pa-{scriptId}.js