Vue SDK

Paket @tracio/vue membungkus inti @tracio/sdk dan mengekspos primitif Vue 3 yang idiomatis: sebuah plugin yang memasang agent, serta composable yang memberikan Anda visitor ID dan hasil identifikasi sebagai reactive ref.

Instalasi

npm install @tracio/vue @tracio/sdk

vue (versi 3.4 atau lebih baru) merupakan peer dependency dan diasumsikan sudah terpasang di aplikasi Anda.

Penyiapan

Pasang plugin pada instance aplikasi Anda dengan app.use(TracioPlugin, options). Opsi tersebut menerima config datar (dengan publicKey) atau { config } yang membawa TracioConfig lengkap.

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

Setiap composable mengembalikan Vue ref untuk data, isLoading, error, dan isFetched, ditambah metode getData untuk melakukan (re-)fetch secara imperatif. Perhatikan bahwa metode imperatif tersebut bernama getData pada setiap composable Vue — tidak ada getId bergaya React.

useVisitorId()

Mengembalikan identifier pengunjung yang stabil beserta status loading dan 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?)

Mengembalikan TracioResult lengkap (visitor ID beserta deteksi bot). opts.immediate bernilai true secara default; berikan { immediate: false } untuk menunda fetch hingga Anda memanggil getData() — misalnya di balik gerbang persetujuan (consent).

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

useTracio()

Escape hatch yang mengembalikan TracioInstance yang mendasarinya (atau undefined bila tidak ada plugin yang terpasang di atas komponen) untuk penggunaan tingkat lanjut. Ia mengembalikan instance secara langsung — tidak ada objek pembungkus yang perlu di-destructure.

const tracio = useTracio()

Contoh lengkap

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

Langkah selanjutnya

• Referensi JavaScript SDK — API inti @tracio/sdk yang menjadi dasar composable
• Penanganan Error — kode error dan strategi retry
• Ikhtisar SDK — setiap paket framework secara sekilas