Nuxt JS Client Plugin

To track client analytics in your Nuxt JS application, follow this guide in order to setup the plugin.

1. Install the SDK

npm i @userflux/browser-js

2. Configure your API key

.env

USERFLUX_WRITE_KEY=your_write_key

nuxt.config.ts

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      userfluxWriteKey: process.env.USERFLUX_WRITE_KEY
    }
  }
})

3. Create the plugin

userflux.client.ts

import UserFlux from "@userflux/browser-js"

export default defineNuxtPlugin((nuxtApp) => {
	const config = useRuntimeConfig()
	const writeKey = config.public.userfluxWriteKey
	
	UserFlux.initialize(writeKey, {
		autoCapture: ["clicks"],
		allowCookies: true,
		autoEnrich: true,
		defaultTrackingProperties: { project: "Dashboard" },
		trackSession: true,
	});
	
	// the sdk cannot support auto capturing page views so need to wire it up here
	nuxtApp.hook("page:finish", UserFlux.trackPageView);
	
	return {
		provide: { userflux: UserFlux },
	}
})

4. Accessing the plugin in files

page.vue

<script setup type="ts">
const { $userflux } = useNuxtApp()

await $userflux?.track?.({
    event: "custom_event",
    userId: '<USER_ID>',
    properties: { ... },
    enrichDeviceData: true,
    enrichLocationData: true,
    enrichPageProperties: true,
    enrichReferrerProperties: true,
    enrichUTMProperties: true,
    enrichPaidAdProperties: true,
    addToQueue: true,
})

await $userflux?.identify?.({
    userId: '<USER_ID>',
    properties: { ... },
    enrichDeviceData: true,
    enrichLocationData: true
})
</script>

5. Additional SDK methods available

For the full list of available methods, checkout the NPM documentation here https://www.npmjs.com/package/@userflux/browser-js