# Nuxt

> A Nuxt module for Nuxt 3 and 4. Configure the key in nuxt.config or the environment, then use auto-imported composables in any component.

Last updated: 2026-09-17

`@fingerly/nuxt` registers the [Vue plugin](https://docs.fingerly.io/docs/sdks/vue) and auto-imports `useIdentify`, `useVerdict` and `useFingerly`.

## Install

```bash npm
npm install @fingerly/nuxt
```

```bash pnpm
pnpm add @fingerly/nuxt
```

```bash yarn
yarn add @fingerly/nuxt
```

## Configure

```ts nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@fingerly/nuxt'],
  fingerly: {
    apiKey: 'fly_pk_us_development_…',
  },
})
```

The options are published to `runtimeConfig.public.fingerly`, so each one can be overridden per environment without a rebuild:

```bash .env
NUXT_PUBLIC_FINGERLY_API_KEY=fly_pk_us_production_…
NUXT_PUBLIC_FINGERLY_ENDPOINT=
NUXT_PUBLIC_FINGERLY_SUBMIT=true
NUXT_PUBLIC_FINGERLY_CONSENT=granted
```

**Module options**

- `apiKey` (string, required): Your public key.
- `endpoint` (string): A single API origin or first-party path.
- `endpoints` (string[]): Ordered first-party endpoints. Set `endpoint` or `endpoints`, not both.
- `fallbackToDefaultEndpoint` (boolean, default `false`): Try the regional API after your own endpoints fail.
- `submit` (boolean, default `true`): Set `false` to collect without sending.
- `consent` ('granted' | 'pending' | 'denied', default `'granted'`): The starting [consent state](https://docs.fingerly.io/docs/privacy-and-consent#consent). Change it at runtime with `setConsent()` from `useFingerly()`.

> **Tip:** Without a key the module warns once in the console and identification fails until one is set.

## Use it

```vue components/SignupForm.vue
<script setup lang="ts">
const { identify, isLoading } = useIdentify({ tag: 'signup' })

async function onSubmit(form: { email: string }) {
  const { requestId } = await identify()
  await $fetch('/api/signup', { method: 'POST', body: { ...form, requestId } })
}
</script>
```

The composables are the Vue SDK's, unchanged. See [useIdentify](https://docs.fingerly.io/docs/sdks/vue#useidentify) and [useVerdict](https://docs.fingerly.io/docs/sdks/vue#useverdict).

## Server rendering

The plugin is registered on both server and client, so the composables work in any component during server rendering, where they return the unidentified state. Identification itself only happens in the browser.

## Verify in a server route

```ts server/api/signup.post.ts
import { load } from '@fingerly/node'

const fingerly = load({ secretKey: process.env.FINGERLY_SECRET_KEY! })

export default defineEventHandler(async (event) => {
  const { email, requestId } = await readBody(event)
  const result = await fingerly.events.get(requestId)
  if (result.tag !== 'signup') throw createError({ statusCode: 400 })
  // decide with result.suspect_level
})
```