Vue SDK

Gói @tracio/vue bao bọc gói lõi @tracio/sdk và cung cấp các primitive đặc trưng của Vue 3: một plugin để gắn agent, cùng các composable trả về cho bạn visitor ID và kết quả nhận dạng dưới dạng các ref phản ứng (reactive ref).

Cài đặt

npm install @tracio/vue @tracio/sdk

vue (phiên bản 3.4 trở lên) là một peer dependency và được giả định là đã được cài đặt sẵn trong ứng dụng của bạn.

Thiết lập

Cài plugin vào instance ứng dụng của bạn bằng app.use(TracioPlugin, options). Tùy chọn chấp nhận hoặc một cấu hình phẳng (với publicKey) hoặc { config } mang theo một TracioConfig đầy đủ.

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

Các composable

Mỗi composable trả về các ref của Vue cho data, isLoading, error và isFetched, cùng một phương thức getData để (tái) truy vấn theo cách mệnh lệnh. Lưu ý: phương thức mệnh lệnh có tên getData ở mọi composable của Vue — không có getId kiểu React.

useVisitorId()

Trả về định danh visitor ổn định cùng với trạng thái đang tải và lỗi.

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

useTracioResult(opts?)

Trả về TracioResult đầy đủ (visitor ID cộng với phát hiện bot). opts.immediate mặc định là true; hãy truyền { immediate: false } để hoãn việc truy vấn cho đến khi bạn gọi getData() — ví dụ phía sau một rào chắn đồng thuận (consent gate).

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

useTracio()

Lối thoát (escape hatch) trả về TracioInstance bên dưới (hoặc undefined khi không có plugin nào được cài phía trên component) dành cho các trường hợp sử dụng nâng cao. Nó trả về instance trực tiếp — không có đối tượng bao bọc (wrapper object) nào để destructure.

const tracio = useTracio()

Ví dụ đầy đủ

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

Các bước tiếp theo

• Tài liệu tham chiếu JavaScript SDK — API lõi @tracio/sdk mà các composable dựa trên đó xây dựng
• Xử lý lỗi — mã lỗi và chiến lược thử lại (retry)
• Tổng quan các SDK — mọi gói framework trong một cái nhìn tổng thể