SDK per Vue

Il pacchetto @tracio/vue incapsula il core @tracio/sdk ed espone primitive idiomatiche di Vue 3: un plugin che monta l'agente e composable che forniscono l'ID visitatore e il risultato dell'identificazione come ref reattive.

Installazione

npm install @tracio/vue @tracio/sdk

vue (3.4 o versione successiva) è una peer dependency e si presume sia già installata nell'app.

Configurazione

Installi il plugin sull'istanza dell'app con app.use(TracioPlugin, options). Le opzioni accettano una configurazione flat (con publicKey) oppure { config } che trasporta un TracioConfig completo.

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

Ogni composable restituisce ref Vue per data, isLoading, error e isFetched, oltre a un metodo getData per (ri)effettuare il fetch in modo imperativo. Si noti che il metodo imperativo si chiama getData in ogni composable Vue — non esiste un getId in stile React.

useVisitorId()

Restituisce l'identificatore stabile del visitatore con stato di caricamento ed errore.

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

useTracioResult(opts?)

Restituisce il TracioResult completo (ID visitatore più rilevamento dei bot). opts.immediate vale true per impostazione predefinita; passi { immediate: false } per rinviare il fetch fino a quando non chiama getData() — ad esempio dietro un gate di consenso.

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

useTracio()

Escape hatch che restituisce l'istanza sottostante TracioInstance (oppure undefined quando nessun plugin è installato al di sopra del componente) per usi avanzati. Restituisce l'istanza direttamente — non c'è alcun oggetto wrapper da destrutturare.

const tracio = useTracio()

Esempio completo

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

Prossimi passi

• Riferimento SDK JavaScript — il core @tracio/sdk API su cui si basano i composable
• Gestione degli errori — codici di errore e strategie di retry
• Panoramica degli SDK — tutti i pacchetti per i framework in un colpo d'occhio