Vue SDK

Das Paket @tracio/vue kapselt das Kern-Paket @tracio/sdk und stellt idiomatische Vue-3-Primitive bereit: ein Plugin, das den Agenten einbindet, sowie Composables, die Ihnen die Besucher-ID und das Identifikationsergebnis als reaktive Refs liefern.

Installation

npm install @tracio/vue @tracio/sdk

vue (3.4 oder neuer) ist eine Peer-Dependency und wird als bereits in Ihrer App installiert vorausgesetzt.

Setup

Installieren Sie das Plugin auf Ihrer App-Instanz mit app.use(TracioPlugin, options). Die Optionen akzeptieren entweder eine flache Konfiguration (mit publicKey) oder { config } mit einer vollständigen 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

Jedes Composable gibt Vue-Refs für data, isLoading, error und isFetched zurück, dazu eine Methode getData zum imperativen (erneuten) Abrufen. Beachten Sie: Die imperative Methode heißt bei jedem Vue-Composable getData — es gibt kein getId im React-Stil.

useVisitorId()

Gibt den stabilen Besucher-Identifikator samt Lade- und Fehlerzustand zurück.

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

useTracioResult(opts?)

Gibt das vollständige TracioResult zurück (Besucher-ID plus Bot-Erkennung). opts.immediate ist standardmäßig true; übergeben Sie { immediate: false }, um den Abruf zu verzögern, bis Sie getData() aufrufen — zum Beispiel hinter einer Einwilligungsschranke.

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

useTracio()

Escape-Hatch, das die zugrunde liegende TracioInstance zurückgibt (oder undefined, wenn oberhalb der Komponente kein Plugin installiert ist) für fortgeschrittene Anwendungsfälle. Es gibt die Instanz direkt zurück — es gibt kein Wrapper-Objekt zum Destrukturieren.

const tracio = useTracio()

Vollständiges Beispiel

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

Nächste Schritte

• JavaScript-SDK-Referenz — die Kern-API @tracio/sdk, auf der die Composables aufbauen
• Fehlerbehandlung — Fehlercodes und Retry-Strategien
• SDK-Übersicht — jedes Framework-Paket auf einen Blick