@fingerru/vue

@fingerru/vue

Vue 3 SDK для получения идентификатора посетителя сайта.

Установка

npm i @fingerru/vue
# or
yarn add @fingerru/vue
# or
pnpm add @fingerru/vue
# or
bun add @fingerru/vue

Подключение

Зарегистрируйте плагин и передайте публичный ключ проекта:

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

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

Для своего proxy передайте его origin в endpoint:

createFingprint({
  apiKey: 'pk_live_example',
  endpoint: 'https://metrics.example.com',
})

loadTimeout задаёт максимальное время ожидания загрузки в миллисекундах; по умолчанию — 10000. Чтобы включить кеш, передайте cache:

createFingprint({
  apiKey: 'pk_live_example',
  cache: { storage: 'sessionStorage', duration: 3600 },
})

storage принимает memory, sessionStorage или localStorage; duration задаётся в секундах.

Composition API

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: {{ data?.user }}</p>
</template>

Без immediate вызовите getData() при действии пользователя. Для useVisitorData() и getData() доступны параметры timeout и ignoreCache.

Options API

После регистрации плагина вызовите this.$fingprint.getVisitorData():

const visitor = await this.$fingprint.getVisitorData({ timeout: 5_000 })
console.log(visitor.user)

Nuxt

SDK работает только в браузере. Зарегистрируйте его в клиентском плагине, например plugins/fingprint.client.ts:

import { createFingprint } from '@fingerru/vue'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(createFingprint({ apiKey: 'pk_live_example' }))
})