Vue SDK

Balíček @tracio/vue obaluje jádro @tracio/sdk a poskytuje idiomatické primitivy pro Vue 3: plugin, který připojí agenta, a composables, jež vám předají ID návštěvníka a výsledek identifikace jako reaktivní refy.

Instalace

npm install @tracio/vue @tracio/sdk

vue (3.4 nebo novější) je peer dependency a předpokládá se, že už je ve vaší aplikaci nainstalovaný.

Nastavení

Nainstalujte plugin na instanci své aplikace pomocí app.use(TracioPlugin, options). Volby přijímají buď plochou konfiguraci (s publicKey), nebo { config } s úplnou 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

Každý composable vrací Vue refy pro data, isLoading, error a isFetched, plus metodu getData pro imperativní (opětovné) načtení. Pozor: imperativní metoda se u každého Vue composable jmenuje getData — žádné getId ve stylu Reactu neexistuje.

useVisitorId()

Vrací stabilní identifikátor návštěvníka spolu se stavem načítání a chyby.

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

useTracioResult(opts?)

Vrací kompletní TracioResult (ID návštěvníka plus detekci botů). opts.immediate má výchozí hodnotu true; předejte { immediate: false }, chcete-li načtení odložit, dokud nezavoláte getData() — například za bránou souhlasu.

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

useTracio()

Únikový poklop (escape hatch), který vrací podkladovou TracioInstance (nebo undefined, pokud nad komponentou není nainstalovaný žádný plugin) pro pokročilé použití. Vrací instanci přímo — neexistuje žádný obalový objekt k destrukturaci.

const tracio = useTracio()

Kompletní příklad

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

Další kroky

• Referenční příručka JavaScript SDK — jádrová API @tracio/sdk, na níž composables staví
• Zpracování chyb — chybové kódy a strategie opakování
• Přehled SDK — každý frameworkový balíček na jednom místě