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)
  .use(createFingerly({ apiKey: 'fly_pk_us_production_…' }))
  .mount('#app')

Installing collects nothing. createFingerly accepts apiKey, endpoint, endpoints, fallbackToDefaultEndpoint, submit and consent. 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