Vue SDK

Пакет @tracio/vue оборачивает базовый пакет @tracio/sdk и предоставляет идиоматичные примитивы Vue 3: плагин, который монтирует агента, и composables, которые отдают вам идентификатор посетителя и результат идентификации в виде реактивных ref-ов.

Установка

npm install @tracio/vue @tracio/sdk

vue (версии 3.4 или новее) является peer-зависимостью и предполагается, что он уже установлен в вашем приложении.

Настройка

Установите плагин на экземпляр вашего приложения через app.use(TracioPlugin, options). Опции принимают либо плоскую конфигурацию (с publicKey), либо { config } с полным TracioConfig.

// main.ts
import { createApp } from "vue"
import { TracioPlugin } from "@tracio/vue"
import App from "./App.vue"
createApp(App)
  .use(TracioPlugin, { publicKey: import.meta.env.VITE_TRACIO_KEY })
  .mount("#app")

Composables

Каждый composable возвращает Vue-ref-ы для data, isLoading, error и isFetched, а также метод getData для императивного (повторного) запроса. Обратите внимание: у каждого Vue-composable императивный метод называется getData — метода getId в стиле React здесь нет.

useVisitorId()

Возвращает стабильный идентификатор посетителя вместе с состоянием загрузки и ошибки.

const { data, isLoading, error, isFetched, getData } = useVisitorId()
// data: Ref<string | null> — the visitorId
// getData(): Promise<void> — re-runs the underlying result fetch

useTracioResult(opts?)

Возвращает полный TracioResult (идентификатор посетителя плюс распознавание ботов). opts.immediate по умолчанию равно true; передайте { immediate: false }, чтобы отложить запрос до вызова getData() — например, за барьером согласия (consent gate).

const { data, isLoading, error, isFetched, getData } = useTracioResult()
// data: Ref<TracioResult | null>

useTracio()

Escape-hatch, который возвращает лежащий в основе TracioInstance (или undefined, если над компонентом не установлен плагин) для продвинутых сценариев. Он возвращает экземпляр напрямую — обёрточного объекта для деструктуризации нет.

const tracio = useTracio()

Полный пример

// main.ts
import { createApp } from "vue"
import { TracioPlugin } from "@tracio/vue"
import App from "./App.vue"
createApp(App)
  .use(TracioPlugin, { publicKey: import.meta.env.VITE_TRACIO_KEY })
  .mount("#app")

<script setup lang="ts">
import { useVisitorId } from "@tracio/vue"
const { data: visitorId, isLoading, error } = useVisitorId()
</script>
<template>
  <span v-if="isLoading">Loading…</span>
  <span v-else-if="error">Error: {{ error.message }}</span>
  <span v-else>Visitor: {{ visitorId }}</span>
</template>

Следующие шаги

• Справочник JavaScript SDK — базовый API @tracio/sdk, на котором построены composables
• Обработка ошибок — коды ошибок и стратегии повторных попыток
• Обзор SDK — все пакеты для фреймворков с одного взгляда