ActionLab Analytics for Nuxt
Add privacy-first, AI-powered analytics to your Nuxt site in under 60 seconds. No cookies, no consent banners, no complex setup.
Setup at a Glance
Add ActionLab to Nuxt in 4 simple steps. Copy one script tag, paste it into your project, and start collecting privacy-friendly analytics immediately.
About Nuxt
Nuxt is the full-featured Vue.js framework that provides server-side rendering, static generation, file-based routing, and a rich module ecosystem. Built on Vue 3 and Nitro server engine, Nuxt 3 delivers excellent developer experience for production Vue applications. ActionLab integrates cleanly through nuxt.config.ts head configuration, providing analytics that work with all Nuxt rendering modes without requiring a Nuxt module.
Why Add Analytics to Nuxt
Nuxt developers maintain careful control over their project dependencies, and adding modules introduces maintenance overhead for version compatibility. ActionLab nuxt.config.ts integration adds analytics without modules, plugins, or build dependencies. The script is configured in the same location as meta tags and other head elements, keeping the setup familiar and predictable. For Nuxt applications with both SSR and client-side navigation, ActionLab handles both seamlessly — initial server-rendered page loads and subsequent client-side transitions are all tracked.
Installation Code
// nuxt.config.ts
export default defineNuxtConfig({
app: {
head: {
script: [
{
src: 'https://cdn.actionlabanalytics.com/actionlab.js',
'data-site': 'YOUR_SITE_ID',
defer: true,
},
],
},
},
});Step-by-Step Setup
- 1
Open your nuxt.config.ts file in the project root.
- 2
Add the ActionLab script to the app.head.script array as shown in the code snippet above.
- 3
Replace YOUR_SITE_ID with your actual site ID from the ActionLab dashboard.
- 4
Nuxt client-side navigation is tracked automatically. The script works with SSR, SSG, and hybrid rendering modes.
Why Use ActionLab with Nuxt
- Clean configuration via nuxt.config.ts head section — no module installation, no plugin file, and no build-time processing.
- Automatic client-side navigation tracking for Nuxt page transitions without router middleware or navigation guards.
- Works with Nuxt 3 (Vue 3) and Nuxt 2 (Vue 2) — adapt the configuration syntax for your Nuxt version.
- No Nuxt module needed, keeping your project dependencies minimal and your nuxt.config.ts clean.
Frequently Asked Questions
Does ActionLab track Nuxt page transitions?
Yes. ActionLab detects client-side route changes via the History API and tracks Nuxt page transitions as pageviews automatically. This works with both the Nuxt router navigation and programmatic navigation. No router middleware or navigation guards are needed for analytics tracking.
Does ActionLab work with Nuxt 2?
Yes. In Nuxt 2, add the script configuration to the head section of nuxt.config.js (instead of app.head in nuxt.config.ts). The object structure is the same: src, data-site, and defer properties.
Can I use runtime config for the site ID?
Yes. In Nuxt 3, use runtimeConfig to pass the site ID from environment variables. Add the site ID to your .env file and reference it in nuxt.config.ts using process.env. Then use useRuntimeConfig() in your app to access it dynamically.
Does ActionLab work with Nuxt Content?
Yes. Pages generated by Nuxt Content module (Markdown, MDX) are tracked individually. Each content page gets its own analytics metrics in the ActionLab dashboard, and the AI insights analyze content performance patterns across your entire Nuxt Content collection.
Does ActionLab conflict with Nuxt modules?
No. ActionLab is loaded as an external script and does not interact with Nuxt module system, Nitro server, or the Vue runtime. There are no conflicts with any Nuxt modules because ActionLab operates at the browser level, below the Nuxt application layer.