SDK Vue

O pacote @tracio/vue encapsula o núcleo @tracio/sdk e expõe primitivas idiomáticas do Vue 3: um plugin que monta o agente e composables que entregam a você o ID de visitante e o resultado de identificação como refs reativas.

Instalação

npm install @tracio/vue @tracio/sdk

O vue (3.4 ou mais recente) é uma dependência de par (peer dependency) e espera-se que já esteja instalado no seu app.

Configuração

Instale o plugin na instância do seu app com app.use(TracioPlugin, options). As opções aceitam tanto uma configuração plana (com publicKey) quanto { config } carregando um 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 retorna refs do Vue para data, isLoading, error e isFetched, além de um método getData para (re)buscar de forma imperativa. Observe que o método imperativo se chama getData em todos os composables do Vue — não existe um getId no estilo do React.

useVisitorId()

Retorna o identificador estável de visitante com estado de carregamento e de erro.

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

useTracioResult(opts?)

Retorna o TracioResult completo (ID de visitante mais detecção de bots). O opts.immediate tem valor padrão true; passe { immediate: false } para adiar a busca até você chamar getData() — por exemplo, atrás de um controle de consentimento.

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

useTracio()

Válvula de escape que retorna a TracioInstance subjacente (ou undefined quando nenhum plugin está instalado acima do componente) para uso avançado. Ela retorna a instância diretamente — não há objeto encapsulador para desestruturar.

const tracio = useTracio()

Exemplo 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 passos

• Referência do SDK JavaScript — a API do núcleo @tracio/sdk sobre a qual os composables são construídos
• Tratamento de erros — códigos de erro e estratégias de retentativa
• Visão geral dos SDKs — todos os pacotes de framework em um só lugar