Vue

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

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

npm install @fingerru/vue

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

Передайте публичный ключ в createFingprint() при создании приложения:

import { createApp } from 'vue'
import { createFingprint } from '@fingerru/vue'
import App from './App.vue'

createApp(App)
  .use(createFingprint({ apiKey: 'pk_live_example' }))
  .mount('#app')

Замените pk_live_example на публичный ключ своего проекта.

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

В компоненте вызовите useVisitorData({ immediate: true }). Запрос выполнится после монтирования компонента:

<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, как показано в быстром старте.