SDK Vue

Le paquet @tracio/vue encapsule le cœur @tracio/sdk et expose des primitives idiomatiques de Vue 3 : un plugin qui monte l'agent, et des composables qui vous fournissent l'identifiant visiteur et le résultat d'identification sous forme de refs réactives.

Installation

npm install @tracio/vue @tracio/sdk

vue (3.4 ou plus récent) est une peer dependency et est censé être déjà installé dans votre application.

Configuration

Installez le plugin sur l'instance de votre application avec app.use(TracioPlugin, options). Les options acceptent soit une configuration plate (avec publicKey), soit { config } portant 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")

Composables

Chaque composable renvoie des refs Vue pour data, isLoading, error et isFetched, ainsi qu'une méthode getData pour (re)charger les données de manière impérative. Notez que la méthode impérative se nomme getData sur tous les composables Vue — il n'existe pas de getId à la manière de React.

useVisitorId()

Renvoie l'identifiant visiteur stable avec son état de chargement et d'erreur.

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

useTracioResult(opts?)

Renvoie le TracioResult complet (identifiant visiteur plus détection des bots). opts.immediate vaut true par défaut ; passez { immediate: false } pour différer le chargement jusqu'à ce que vous appeliez getData() — par exemple derrière une barrière de consentement.

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

useTracio()

Échappatoire qui renvoie l'instance TracioInstance sous-jacente (ou undefined lorsqu'aucun plugin n'est installé au-dessus du composant) pour un usage avancé. Elle renvoie l'instance directement — il n'y a pas d'objet enveloppe à déstructurer.

const tracio = useTracio()

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

Étapes suivantes

• Référence du SDK JavaScript — l'API du cœur @tracio/sdk sur laquelle s'appuient les composables
• Gestion des erreurs — codes d'erreur et stratégies de réessai
• Aperçu des SDK — tous les paquets de framework en un coup d'œil