Nuxt

В Nuxt используйте @fingerru/vue в клиентском плагине. SDK работает в браузере. Для работы понадобится публичный API-ключ проекта. В быстром старте показано, как получить ключ и проверить запрос.

Установите пакетСкопировать ссылку

npm install @fingerru/vue

Передайте ключ через конфигурациюСкопировать ссылку

Добавьте публичный ключ в конфигурацию Nuxt:

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    public: { fingprintApiKey: process.env.FINGPRINT_API_KEY },
  },
})

Задайте FINGPRINT_API_KEY в окружении сборки, затем зарегистрируйте SDK в клиентском плагине:

// plugins/fingprint.client.ts
import { createFingprint } from '@fingerru/vue'

export default defineNuxtPlugin((nuxtApp) => {
  const config = useRuntimeConfig()

  nuxtApp.vueApp.use(createFingprint({ apiKey: config.public.fingprintApiKey }))
})

Получите идентификаторСкопировать ссылку

Вызов useVisitorData({ immediate: true }) отправляет запрос после монтирования компонента. Хук возвращает состояние запроса в isLoading и error, а результат — в data. Идентификатор находится в data.user.

<!-- components/VisitorData.vue -->
<script setup lang="ts">
import { useVisitorData } from '@fingerru/vue'

const { data, error, isLoading } = useVisitorData({ immediate: true })
</script>

<template>
  <p v-if="isLoading">Получаем данные...</p>
  <p v-else-if="error">Не удалось получить данные: {{ error.message }}</p>
  <p v-else>Visitor ID: {{ data?.user }}</p>
</template>

Добавьте компонент на страницу. Чтобы запускать запрос по действию пользователя, установите immediate: false и вызовите getData() в нужном месте. После успешного запроса найдите событие по полю Visitor ID в кабинете.