Vue SDK

Pakiet @tracio/vue opakowuje rdzeniowy pakiet @tracio/sdk i udostępnia idiomatyczne prymitywy Vue 3: plugin, który montuje agenta, oraz composable, które przekazują Ci identyfikator odwiedzającego i wynik identyfikacji jako reaktywne refy.

Instalacja

npm install @tracio/vue @tracio/sdk

vue (3.4 lub nowszy) jest zależnością peer i zakłada się, że jest już zainstalowany w Twojej aplikacji.

Konfiguracja

Zainstaluj plugin na instancji swojej aplikacji za pomocą app.use(TracioPlugin, options). Opcje przyjmują albo płaską konfigurację (z publicKey), albo { config } zawierające pełną 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

Każdy composable zwraca refy Vue dla data, isLoading, error i isFetched, a także metodę getData do imperatywnego (ponownego) pobierania. Zwróć uwagę: metoda imperatywna nazywa się getData w każdym composable Vue — nie ma getId w stylu Reacta.

useVisitorId()

Zwraca stabilny identyfikator odwiedzającego wraz ze stanem ładowania i błędu.

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

useTracioResult(opts?)

Zwraca pełny TracioResult (identyfikator odwiedzającego oraz wykrywanie botów). opts.immediate domyślnie ma wartość true; przekaż { immediate: false }, aby odroczyć pobieranie do momentu wywołania getData() — na przykład za bramką zgody.

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

useTracio()

Furtka awaryjna, która zwraca bazową TracioInstance (lub undefined, gdy powyżej komponentu nie zainstalowano żadnego pluginu) do zaawansowanych zastosowań. Zwraca instancję bezpośrednio — nie ma obiektu opakowującego do destrukturyzacji.

const tracio = useTracio()

Pełny przykład

// 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>

Następne kroki

• Dokumentacja JavaScript SDK — rdzeniowe API @tracio/sdk, na którym opierają się composable
• Obsługa błędów — kody błędów i strategie ponawiania
• Przegląd SDK — każdy pakiet frameworkowy w skrócie