fingerlydocs
fingerly.io Log inDashboard
SDKs

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.

@fingerly/nuxt registers the Vue plugin and auto-imports useIdentify, useVerdict and useFingerly.

Install

npm install @fingerly/nuxt

Configure

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@fingerly/nuxt'],
  fingerly: {
    apiKey: 'fly_pk_development_…',
    consent: 'granted', // only once you have consent (or another lawful basis)
  },
})

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

.env
NUXT_PUBLIC_FINGERLY_API_KEY=fly_pk_production_…
NUXT_PUBLIC_FINGERLY_ENDPOINT=
NUXT_PUBLIC_FINGERLY_SUBMIT=true
NUXT_PUBLIC_FINGERLY_CONSENT=granted

Module options

  • apiKeystringrequired
    Your public key.
  • endpointstring
    Deprecated. Means the same as endpoints.
  • endpointsstring[]
    Ordered first-party endpoints, such as your proxy's issued path, /k7x2qm4a, posted to exactly as given. Set endpoint or endpoints, not both.
  • fallbackToDefaultEndpointbooleanDefault false
    Try the Fingerly API after your own endpoints fail.
  • submitbooleanDefault true
    Set false to collect without sending.
  • consent'granted' | 'pending' | 'denied'Default 'pending'
    The starting consent state. Change it at runtime with setConsent() from useFingerly().

Use it

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

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
})

Last updated