Nuxt

The @faststats/nuxt module sets up the browser SDK for you. It reads its configuration from your nuxt.config and starts tracking on the client. It supports Nuxt 3.12 and later, including Nuxt 4.

InstallCopy Anchor Link

 npm install @faststats/nuxt

 pnpm add @faststats/nuxt

 yarn add @faststats/nuxt

 bun add @faststats/nuxt

Register the ModuleCopy Anchor Link

Add the module and your settings under the faststats key.

export default defineNuxtConfig({
	modules: ["@faststats/nuxt"],
	faststats: {
		siteKey: "your_site_key",
		extensions: {
			errorTracking: true,
			webVitals: true,
			sessionReplay: true,
		},
	},
});

The module accepts every core option from the SDK. Extensions are enabled through the extensions object and are only loaded when you turn them on. With errorTracking enabled, the module also hooks into the Vue error handler so component errors are reported. See Configuration for the full list.

Use Environment VariablesCopy Anchor Link

Anything under faststats lives in the public runtime config, so you can set it through environment variables. The site key maps to NUXT_PUBLIC_FASTSTATS_SITE_KEY.

NUXT_PUBLIC_FASTSTATS_SITE_KEY=your_site_key

If the site key is missing the module logs a warning during build and the client plugin does not start.

Track Custom EventsCopy Anchor Link

Use the WebAnalytics instance injected into the Nuxt app.

<script setup lang="ts">
const { $faststats } = useNuxtApp();

function buy() {
	$faststats.track("purchase", { plan: "pro", price: 29 });
}
</script>

<template>
	<button type="button" @click="buy">Buy now</button>
</template>

Track Server ErrorsCopy Anchor Link

Nuxt runs on Nitro, so you can report errors thrown in server routes with the @faststats/nitro plugin. Install it and register the plugin that matches your Nitro version.

npm install @faststats/nitro

import { createRequire } from "node:module";

const require = createRequire(import.meta.url);
const errorTrackingPlugin = require.resolve("@faststats/nitro/v2");

export default defineNuxtConfig({
	modules: ["@faststats/nuxt"],
	faststats: {
		siteKey: "your_site_key",
	},
	nitro: {
		plugins: [errorTrackingPlugin],
	},
});

The server plugin needs its own project token through FASTSTATS_TOKEN. Read the server section in Error Tracking for the details.