Vue SDK

Paketet @tracio/vue kapslar in kärnpaketet @tracio/sdk och exponerar idiomatiska Vue 3-primitiver: ett plugin som monterar agenten, och composables som ger dig besökar-ID:t och identifieringsresultatet som reaktiva refs.

Installation

npm install @tracio/vue @tracio/sdk

vue (3.4 eller senare) är ett peer-beroende och förutsätts redan vara installerat i din app.

Setup

Installera pluginet på din app-instans med app.use(TracioPlugin, options). Optionerna accepterar antingen en platt konfiguration (med publicKey) eller { config } med en fullständig 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

Varje composable returnerar Vue-refs för data, isLoading, error och isFetched, samt en metod getData för att hämta (på nytt) imperativt. Observera att den imperativa metoden heter getData i varje Vue-composable — det finns inget getId i React-stil.

useVisitorId()

Returnerar den stabila besökaridentifieraren tillsammans med laddnings- och feltillstånd.

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

useTracioResult(opts?)

Returnerar det fullständiga TracioResult (besökar-ID plus botdetektering). opts.immediate är som standard true; skicka { immediate: false } för att skjuta upp hämtningen tills du anropar getData() — till exempel bakom en samtyckesspärr.

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

useTracio()

Reservutgång som returnerar den underliggande TracioInstance (eller undefined när inget plugin är installerat ovanför komponenten) för avancerade användningsfall. Den returnerar instansen direkt — det finns inget wrapper-objekt att destrukturera.

const tracio = useTracio()

Fullständigt exempel

// 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ästa steg

• JavaScript SDK-referens — kärn-API:et @tracio/sdk som composables bygger på
• Felhantering — felkoder och retry-strategier
• SDK-översikt — varje framework-paket i överblick