Vue SDK

Пакет @tracio/vue обгортає ядро @tracio/sdk та надає ідіоматичні примітиви Vue 3: плагін, що монтує агент, і composable-функції, які повертають вам ідентифікатор відвідувача та результат ідентифікації у вигляді реактивних 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")

Composable-функції

Кожна 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() — наприклад, за бар'єром згоди.

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, на якому будуються composable-функції
• Обробка помилок — коди помилок і стратегії повторних спроб
• Огляд SDK — усі пакети для фреймворків з першого погляду