> For the complete documentation index, see [llms.txt](https://userflux.gitbook.io/userflux-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://userflux.gitbook.io/userflux-docs/sdks/nuxt-js-client-plugin.md).

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