SDK de Vue

El paquete @tracio/vue envuelve el núcleo @tracio/sdk y expone primitivas idiomáticas de Vue 3: un plugin que monta el agente y composables que le entregan el ID de visitante y el resultado de identificación como refs reactivas.

Instalación

npm install @tracio/vue @tracio/sdk

vue (3.4 o posterior) es una peer dependency y se espera que ya esté instalada en su app.

Configuración

Instale el plugin en la instancia de su app con app.use(TracioPlugin, options). Las opciones aceptan bien una configuración plana (con publicKey) o bien { config } que lleva 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")

Composables

Cada composable devuelve refs de Vue para data, isLoading, error e isFetched, además de un método getData para (re)obtener los datos de forma imperativa. Tenga en cuenta que el método imperativo se llama getData en todos los composables de Vue; no existe un getId al estilo de React.

useVisitorId()

Devuelve el identificador de visitante estable con su estado de carga y error.

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

useTracioResult(opts?)

Devuelve el TracioResult completo (ID de visitante más detección de bots). opts.immediate es true por defecto; pase { immediate: false } para diferir la obtención hasta que llame a getData(), por ejemplo detrás de una barrera de consentimiento.

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

useTracio()

Vía de escape que devuelve la instancia TracioInstance subyacente (o undefined cuando no hay ningún plugin instalado por encima del componente) para usos avanzados. Devuelve la instancia directamente; no hay ningún objeto envoltorio que desestructurar.

const tracio = useTracio()

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

Próximos pasos

• Referencia del SDK de JavaScript — la API del núcleo @tracio/sdk sobre la que se construyen los composables
• Manejo de errores — códigos de error y estrategias de reintento
• Resumen de los SDKs — todos los paquetes de framework de un vistazo