fingerlydocs
fingerly.io Log inDashboard
SDKs

Vue

A plugin and composables for Vue 3.3 and newer. One shared identification per app, readonly reactive state, and safe under server rendering.

@fingerly/vue installs the JavaScript SDK as a Vue plugin. Composables read one shared identification as readonly refs.

Requirements

  • Vue 3.3 or newer.
  • A public key with your site in its allowed origins.

Install

npm install @fingerly/vue

Install the plugin

main.ts
import { createApp } from 'vue'
import { createFingerly } from '@fingerly/vue'
import App from './App.vue'

createApp(App)
  // consent: 'granted' only once you have consent (or another lawful basis)
  .use(createFingerly({ apiKey: 'fly_pk_production_…', consent: 'granted' }))
  .mount('#app')

Installing collects nothing. createFingerly accepts apiKey, endpoint, endpoints, fallbackToDefaultEndpoint, submit and consent. consent defaults to pending, which collects nothing until you grant it. Change consent at runtime with useFingerly().setConsent().

Identify on an action

Checkout.vue
<script setup lang="ts">
import { useIdentify } from '@fingerly/vue'

const props = defineProps<{ orderId: string }>()
const { identify, isLoading, error } = useIdentify({ tag: () => 'checkout:' + props.orderId })

async function onSubmit() {
  const { requestId } = await identify()
  await submitOrder({ orderId: props.orderId, requestId })
}
</script>

<template>
  <form @submit.prevent="onSubmit">
    <button :disabled="isLoading">{{ isLoading ? 'Checking…' : 'Pay now' }}</button>
    <p v-if="error">{{ error.message }}</p>
  </form>
</template>

useIdentify

Options

  • immediatebooleanDefault false
    Identify in onMounted.
  • tagMaybeRefOrGetter<string | undefined>
    The tag to send, read at the moment of submission.

Returns the same state as the React hook, with every field a readonly ref and isReady and isSuspicious as computed refs, plus identify({ tag?, force? }) and refresh({ tag? }).

A call while an identification is in flight gets that identification, and a finished result is reused until you call refresh(). A failure is not cached.

useVerdict

AutomationNotice.vue
<script setup lang="ts">
import { useVerdict } from '@fingerly/vue'

const { matched, confidence } = useVerdict('automation', { min: 'high' })
</script>

<template>
  <aside v-if="matched">Automated access suspected ({{ confidence }})</aside>
</template>

Both arguments accept refs and getters. Verdict names are incognito, shields, tor, emulator, automation and farm.

Options API

Legacy.vue
<script lang="ts">
export default {
  async mounted() {
    const { requestId } = await this.$fingerly.identify()
  },
}
</script>

Server rendering

immediate runs in onMounted, which never runs on the server. Calling identify() during server rendering rejects with FingerlyServerError. In a custom SSR setup, create the plugin per app instance rather than at module scope.

Last updated