# 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

```shell
npm i @userflux/browser-js
```

### 2. Configure your API key

{% code title=".env" %}

```shell
USERFLUX_WRITE_KEY=your_write_key
```

{% endcode %}

{% code title="nuxt.config.ts" %}

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

{% endcode %}

### 3. Create the plugin

{% code title="userflux.client.ts" %}

```typescript
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 },
	}
})
```

{% endcode %}

### 4. Accessing the plugin in files

{% code title="page.vue" %}

```typescript
<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>
```

{% endcode %}

### 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://userflux.gitbook.io/userflux-docs/sdks/nuxt-js-client-plugin.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.