Vue SDK

Het pakket @tracio/vue omhult de kern-@tracio/sdk en biedt idiomatische Vue 3-primitieven: een plugin die de agent koppelt, en composables die je de visitor-ID en het identificatieresultaat als reactieve refs aanreiken.

Installatie

npm install @tracio/vue @tracio/sdk

vue (3.4 of nieuwer) is een peer-dependency en wordt verondersteld al in je app geïnstalleerd te zijn.

Setup

Installeer de plugin op je app-instance met app.use(TracioPlugin, options). De opties accepteren ofwel een platte configuratie (met publicKey) ofwel { config } met een volledige 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

Elke composable geeft Vue-refs terug voor data, isLoading, error en isFetched, plus een methode getData om imperatief (opnieuw) op te halen. Let op: de imperatieve methode heet bij elke Vue-composable getData — er is geen getId in React-stijl.

useVisitorId()

Geeft de stabiele bezoekersidentificatie terug, samen met laad- en foutstatus.

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

useTracioResult(opts?)

Geeft het volledige TracioResult terug (visitor-ID plus botdetectie). opts.immediate staat standaard op true; geef { immediate: false } mee om het ophalen uit te stellen totdat je getData() aanroept — bijvoorbeeld achter een toestemmingsschakel.

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

useTracio()

Escape hatch die de onderliggende TracioInstance teruggeeft (of undefined wanneer er boven de component geen plugin is geïnstalleerd) voor geavanceerd gebruik. Het geeft de instance rechtstreeks terug — er is geen wrapper-object om te destructureren.

const tracio = useTracio()

Volledig voorbeeld

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

Volgende stappen

• JavaScript SDK-referentie — de kern-API @tracio/sdk waarop de composables voortbouwen
• Foutafhandeling — foutcodes en retry-strategieën
• SDK-overzicht — elk framework-pakket in één oogopslag