, -

Nuxt 3 Analytics Integration: GDPR-Compliant Setup with Litlyx

Why Standard Analytics Break GDPR in Nuxt 3

Standard analytics tools like Google Analytics 4 create a genuine GDPR compliance problem in Nuxt 3 projects, and the framework's SSR architecture makes that problem worse. The good news is that Privacy-first analytics platforms sidestep the entire issue by collecting no personal data in the first place.

The SSR compliance trap

Nuxt 3 comes with built-in server-side rendering capabilities by default, which is great for performance and SEO. For analytics compliance, though, it introduces a specific liability. When you drop a third-party analytics script into a component template or call useHead() unconditionally, that script gets serialized into the server-rendered HTML. It ships to the browser before any user interaction has occurred, and certainly before any consent decision has been made.

A script tag placed unconditionally in a Nuxt component is serialized into the server-rendered HTML and ships to the browser before any consent decision exists, which makes this a compliance liability baked into the architecture itself, not a configuration mistake.

What GDPR Article 4 means for analytics scripts

GDPR Article 4(1) defines personal data broadly. Analytics identifiers set by tools like GA4, including client IDs and session IDs, can qualify as personal data under that definition. This means a lawful basis is required before a single byte of that data is collected. Teams typically respond by adding a consent banner, which feels like a fix but trades one problem for several others: bounce rates climb, Core Web Vitals scores drop, and users get a worse experience before they even see your content.

The cleaner path is Cookieless tracking with a platform that collects no personal data at all. Litlyx is a privacy-first, all-in-one analytics platform made and hosted in the EU, fully GDPR-compliant, and it collects zero personal information in the browser. No identifiers, no compliance trap. Just clean data.

What Does a GDPR-Compliant Nuxt 3 Analytics Stack Look Like?

A genuinely compliant analytics stack collects only aggregated, non-personal metrics, which means no consent is legally required under GDPR Recital 26. Getting this right comes down to three things: Cookieless data collection, EU data residency, and zero personal data storage. Get all three right, and your Nuxt 3 app can measure everything it needs without slowing users down.

Three Criteria Worth Understanding

Cookieless tracking. When no persistent identifiers are written to the browser, the primary legal trigger for GDPR consent requirements simply does not exist. No client ID, no fingerprint hash, no long-lived token sitting in storage. Each request is measured in aggregate and then discarded at the individual level. This is what separates Privacy-first analytics from tools like Google Analytics 4, which sets identifiers that GDPR Article 4 classifies as personal data.

EU data residency. Sending analytics data to servers outside the European Economic Area creates obligations under GDPR Chapter V, including Standard Contractual Clauses or adequacy decisions. Keeping data inside the EEA eliminates that overhead entirely.

Zero personal data collection. Even without persistent identifiers, some tools infer personal data through IP logging or cross-site correlation. A truly GDPR-compliant stack avoids this at the infrastructure level, not just in configuration.

Litlyx is a privacy-first, all-in-one analytics platform made and hosted in the EU, and fully GDPR-compliant, satisfying all three criteria out of the box. It is also cookieless and collects no personal data, which means the user-friendly insights your team needs reach the dashboard with no consent logic complicating the frontend. No banner, no latency penalty, no legal grey area.

Setting Up the Scenario: Our Nuxt 3 Project and Litlyx Account

Before writing a single line of analytics code, we need a working Nuxt 3 app and a Litlyx account ready to receive data. Both steps take only a few minutes, and the result is a clean baseline for a fully GDPR-compliant integration.

Start by scaffolding a fresh project with:

This gives us the standard nuxt.config.ts entry point and the pages/ directory that powers Nuxt 3's file-based routing. Confirm the installed version is 3.x by running npx nuxi info before continuing.

Next, create a free Litlyx account and open the dashboard. Generate a Project ID from the project settings panel. Litlyx is a privacy-first, all-in-one analytics platform made and hosted in the EU, so the Project ID connects your app to a GDPR-compliant data pipeline from the start.

Store that ID securely in a .env file at the project root:

Nuxt's runtimeConfig picks up any variable prefixed with NUXT_PUBLIC_ automatically, making it available at build time without hardcoding secrets into source files.

Prerequisites and versions used

• Node.js 18 or later
• Nuxt 3.x with nuxt.config.ts as the active config
• A Litlyx account (free tier covers the tutorial)
• npm or pnpm as your package manager

Honestly, by the end of this tutorial our app will send automatic page-view events on every route change and fire a custom event from a component, all without any personal data collection in sight. That is the promise of Cookieless tracking done right.

How Do You Install Litlyx in a Nuxt 3 Project?

Installing Litlyx takes only a single package and one plugin file. The SDK works with all modern JavaScript and TypeScript frameworks, so there is no separate Nuxt module wrapper to configure. The whole process can realistically be done in under a minute.

Start by adding the package to your project:

That's the only dependency you need. Once it's installed, you have access to both Lit.init() for initialization and Lit.event() for custom tracking.

Why the .client Plugin Suffix Matters for SSR

Nuxt 3 comes with built-in server-side rendering capabilities by default, which means any plugin without a .client suffix will execute on the server as well as in the browser. Analytics scripts have no business running server-side. They need access to the browser environment, and forcing them to execute during SSR creates hydration mismatches and potential compliance issues.

Create the plugin file at:

The .client suffix tells Nuxt to skip this file entirely during server rendering. The plugin only activates after hydration completes on the client, which is exactly what we want for a Privacy-first analytics setup.

Reading the Project ID from Nuxt Runtime Config

Hardcoding your Project ID is a bad habit, even though it is a public identifier. The cleaner approach is storing it in your .env file and reading it through Nuxt's runtimeConfig.

Add this to your .env:

Then expose it in nuxt.config.ts:

Nuxt automatically maps NUXT_PUBLIC_LITLYX_ID to runtimeConfig.public.litlyxId at build time. Inside the plugin, the initialization looks like this:

The provide call here is deliberate. By exposing the Lit instance through Nuxt's provide system, any component can access it via useNuxtApp().$lit without importing the SDK again.

Once your local dev server is running with npm run dev, visit a page and open your Litlyx dashboard. Litlyx automatically tracks page visits, real-time users, and unique visitors once initialized, so you should see an initial page-view event appear within seconds. That confirmation tells you the full pipeline is working correctly.

How Does Automatic Page-View Tracking Work in Nuxt 3?

Automatic page-view tracking in Nuxt 3 requires more than a single initialization call. Because Nuxt comes with built-in SSR capabilities and uses the Vue Router for client-side navigation, each route change fires as a JavaScript event rather than a full page reload. That means you need to hook into router.afterEach to catch every navigation, not just the first one.

Handling client-side route changes

Look, when a user clicks an internal link in a Nuxt 3 app, the browser never reloads the page. The Vue Router intercepts the click, updates the URL, and swaps the component. A one-time Lit.init() call captures the initial load, but any subsequent route changes are invisible to it.

The fix is straightforward. Inside plugins/litlyx.client.ts, after calling Lit.init(), grab the router instance via useRouter() and register an afterEach hook:

This fires on every navigation, hard or soft, so your page-view counts stay accurate across a full SPA session. Because Litlyx is cookieless and collects no personal data, each of those page-view events is recorded without writing any persistent identifier to the browser. No fingerprinting, no stored IDs, no GDPR exposure.

Complete plugin file at this stage

Here is the full plugins/litlyx.client.ts file at this point in the setup, ready to copy and paste:

A few things worth calling out here. The .client.ts suffix ensures this plugin never runs during SSR, which prevents hydration mismatches and keeps the compliance boundary clean. The runtimeConfig read pulls your Project ID from the environment at build time. And the router.afterEach hook handles both initial navigation and all subsequent client-side route changes in one place.

This pattern delivers Privacy-first analytics across your entire Nuxt 3 site with minimal code and zero consent overhead.

How Do You Send Custom Events from Nuxt 3 Components?

Sending custom events from any Nuxt 3 component is straightforward once the plugin is in place. You access the Lit instance through useNuxtApp(), call Lit.event() with a name and optional metadata, and the data appears in your dashboard within seconds. Because Litlyx collects no personal data, every event you send stays GDPR-compliant by design.

To access the instance, add this line at the top of your <script setup> block:

From there, you can call $lit.event('your_event_name', { key: 'value' }) anywhere inside that component, inside click handlers, lifecycle hooks, or watchers.

Example: tracking a signup button

Here is a realistic newsletter signup component showing the full pattern:

When a user clicks the button, Lit.event() fires immediately. Litlyx can track custom events with Lit.event() and surfaces them in the Events tab of your dashboard in real time, so you get user-friendly insights without any polling delay or data pipeline lag.

This pattern works across every component in your app. A checkout confirmation page, a video play trigger, a file download link: each one follows the same two-line approach.

What metadata is safe to send?

Metadata fields should describe the action, not the actor. Safe values include things like button labels, page sections, content categories, or A/B test variant names. These are aggregated server-side, which means they feed into data-driven decisions without ever exposing who performed the action.

Avoid passing anything that could identify a user: email addresses, user IDs, IP-derived values, or session tokens. Stick to behavioral context and your integration stays firmly GDPR-compliant. The Litlyx platform enforces this at the infrastructure level too, since it stores no personal identifiers regardless of what metadata fields arrive.

Is Any GDPR Configuration or Consent Banner Required?

No consent banner is required when using Litlyx in your Nuxt 3 project. Because Litlyx is cookieless and collects no personal data, it falls outside the scope of GDPR Article 4(1), which defines personal data as any information relating to an identified or identifiable natural person. No identifiable person, no personal data, no consent required.

This is the core practical advantage of Privacy-first analytics over tools like Google Analytics 4. GA4 sets identifiers that regulators across multiple EU member states have already classified as personal data, which means you need a lawful basis before a single byte is collected. That typically means a consent banner, a consent management platform, and the performance cost that comes with both. The Nuxt Scripts consent-gating approach for GA4 is a real-world example of this complexity: you wire up consent state, gate the script load, and accept the latency hit on every page. With Cookieless tracking, that entire chain disappears.

EU data residency adds a second layer of protection. Litlyx stores all data within the European Economic Area, so GDPR Chapter V rules on cross-border data transfers simply do not apply. There are no Standard Contractual Clauses to draft, no adequacy decisions to monitor.

One best practice remains, even when consent is not legally required: document your analytics tool in your privacy policy. Transparency is a core GDPR principle, and telling users what you measure, even when it is fully anonymous, builds trust. A short paragraph naming Litlyx, describing what aggregated metrics you collect, and confirming no personal data is stored is all that is needed. That is a five-minute task, not a compliance project.

The result is user-friendly insights delivered without friction, for your users and for your team.

Verifying the Integration: Reading Data in the Litlyx Dashboard

Once your Nuxt 3 plugin is running and you have visited a few routes locally, open the Litlyx dashboard and you should see page-view events appearing almost immediately. Litlyx provides real-time insights with no waiting period, so data shows up as soon as the browser fires the event. No cache delay, no batch processing window, nothing to wait on.

What to Check in the Events Tab

Start with the main overview panel. Each route you visited during your npm run dev session should appear as a separate page-view, mapped to the path you passed through the router.afterEach hook. Then switch to the Events tab and look for any custom events you fired, such as the newsletter signup button click from the previous section. Each event should display its name and any metadata fields you attached, confirming the full data pipeline from component to dashboard is working correctly.

A few things to verify at this stage:

• Page-view counts match the number of route changes you made during testing.
• Custom events appear with the correct names and metadata values.
• Referrer and session breakdowns are present but show no raw IP addresses or user-level identifiers.

Confirming Zero Personal Data Storage

This is where Privacy-first analytics pays off visibly. Scroll through every available breakdown: sessions, referrers, device types. You will not find stored IP addresses, user IDs, or any persistent identifier tied to an individual browser. That absence is intentional by design, and it is exactly what allows you to skip a consent banner entirely. The data you see supports data-driven decisions without ever touching personal data as defined under GDPR Article 4, keeping your Nuxt 3 integration clean and fully compliant from day one.

What Are the Next Steps After the Basic Integration?

Once your page-view and custom event tracking are confirmed in the dashboard, you have a solid foundation. The natural progression is to expand coverage, tighten your deployment pipeline, and give your team access to user-friendly insights without any compliance headaches.

Start with goal funnels inside the Litlyx dashboard. These let you trace conversion paths across multiple pages, which means no additional code changes are needed on the Nuxt side. You get richer data-driven decisions about where users drop off in your signup or checkout flow, simply by configuring the funnel in the UI.

Next, lock down your deployment setup. Add NUXT_PUBLIC_LITLYX_ID as a build-time environment variable in Vercel, Netlify, or whichever Node.js host you use. This keeps the Project ID out of your source code and ensures every environment (staging, production) sends data to the correct Litlyx project.

For actions that happen outside the browser, such as server-processed form submissions, consider the Litlyx REST API for server-side event sending. Because Litlyx works with all modern JavaScript and TypeScript frameworks and environments, the API fits naturally into any Nuxt server route or middleware.

A few more things worth doing:

• Share read-only dashboard access with stakeholders using the team sharing feature, so product managers see metrics without touching raw data.
• Check the Litlyx changelog periodically. The platform regularly adds new metric types that appear in your dashboard with zero SDK updates required on the Nuxt side.

This Privacy-first analytics setup scales with your team, your traffic, and your product without ever introducing the consent banner overhead that plagues heavier tools., -