Vue SDK

Pachetul @tracio/vue încapsulează pachetul de bază @tracio/sdk și expune primitive idiomatice pentru Vue 3: un plugin care montează agentul și composable-uri care vă oferă ID-ul vizitatorului și rezultatul identificării sub formă de ref-uri reactive.

Instalare

npm install @tracio/vue @tracio/sdk

vue (3.4 sau mai nou) este o dependență peer și se presupune că este deja instalat în aplicația dumneavoastră.

Configurare

Instalați plugin-ul pe instanța aplicației cu app.use(TracioPlugin, options). Opțiunile acceptă fie o configurație simplă (cu publicKey), fie { config } care conține un TracioConfig complet.

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

Fiecare composable returnează ref-uri Vue pentru data, isLoading, error și isFetched, plus o metodă getData pentru a (re)obține datele în mod imperativ. Rețineți că metoda imperativă se numește getData la fiecare composable Vue — nu există un getId în stil React.

useVisitorId()

Returnează identificatorul stabil al vizitatorului împreună cu starea de încărcare și de eroare.

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

useTracioResult(opts?)

Returnează TracioResult-ul complet (ID-ul vizitatorului plus detecția boților). opts.immediate are valoarea implicită true; transmiteți { immediate: false } pentru a amâna obținerea datelor până când apelați getData() — de exemplu, în spatele unei bariere de consimțământ.

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

useTracio()

Portiță de scăpare care returnează TracioInstance-ul subiacent (sau undefined când niciun plugin nu este instalat deasupra componentei) pentru utilizări avansate. Returnează instanța direct — nu există niciun obiect wrapper de destructurat.

const tracio = useTracio()

Exemplu complet

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

Pașii următori

• Referință JavaScript SDK — API-ul de bază @tracio/sdk pe care se construiesc composable-urile
• Gestionarea erorilor — coduri de eroare și strategii de reîncercare
• Prezentare generală SDK-uri — fiecare pachet de framework dintr-o privire