Install Statsy on Nuxt.js 3
This page is all about how to get Statsy up and running on Nuxt.js. We've made the steps easy to follow. If you're ready to use Statsy with Nuxt.js, you're in the right place. Let's get started!
Basic setup
Install @statsy/vue
The Statsy React package is available on npm. It is recommended to install it with your package manager of choice.
pnpm i @statsy/vue
Add Statsy plugin to nuxt.config.js
The Statsy Nuxt package provides a plugin that you can add to your app. It will automatically track page views and send them to Statsy.
import { VueStatsy } from "@statsy/vue";
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(VueStatsy, {
siteId: "YOUR_SITE_ID",
});
});
Then, add it to your nuxt.config.js
file:
export default defineNuxtConfig({
plugins: ["~/plugins/statsy.client.js"],
// ...
});
Track custom events
You can track custom events by using the track
function.
<template>
<button @click="trackEvent">Click me!</button>
</template>
<script lang="ts">
export default {
name: "Button",
methods: {
trackEvent() {
this.$statsy.track("button-click", { label: "Contact Form" });
},
},
};
</script>
Read more about:
Advanced setup
Component props
The <Analytics />
component accepts the following props:
Prop name | Type | Description | Required |
---|---|---|---|
siteId | string | The ID of your site. You can find it in the Sites section. | Yes |
trackingEndpointDomain | string | The domain to use for tracking. Defaults to statsy.observer . | No |
eventMiddleware | func | A function that is called before sending the request. | No |
Custom tracking endpoint domain
By default, the Statsy React package sends tracking requests to statsy.observer
. You can change this by using the trackingEndpointDomain
prop.
import { VueStatsy } from "@statsy/vue";
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(VueStatsy, {
siteId: "YOUR_SITE_ID",
trackingEndpointDomain: "statsy.example.com",
});
});
Learn more about custom domains in the Tracking Script section.
Customizing events with eventMiddleware
The eventMiddleware
function is called before sending the request to Statsy. It receives the following arguments:
Argument name | Type | Description |
---|---|---|
event | object | The event object that will be sent to Statsy. |
event.name | string | The name of the event. |
event.href | string | The href of the event. |
The eventMiddleware
option lets you change details about an event before sending it to Statsy. For example, you can set it up so that any event with "/admin" in the URL is ignored.
When you make it return null
, no event details are sent. Plus, you can tweak the URL however you want, like getting rid of parts after the question mark.
import { VueStatsy } from "@statsy/vue";
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(VueStatsy, {
siteId: "YOUR_SITE_ID",
eventMiddleware: (event) => {
// Ignore all events that have a `/admin` inside the URL
if (event.href.includes("/admin")) {
return null;
}
// Remove the `token` query parameter from the URL
if (event.href.includes("token")) {
let url = new URL(event.href);
url.searchParams.delete("token");
return {
...event,
href: url.toString(),
};
}
return event;
},
});
});