Vue SDK

แพ็กเกจ @tracio/vue ห่อหุ้มแพ็กเกจแกนหลัก @tracio/sdk และเปิดให้ใช้ primitive แบบ Vue 3 ที่เป็นสำนวนของเฟรมเวิร์ก ได้แก่ ปลั๊กอินที่ทำหน้าที่ติดตั้ง agent และ composable ที่ส่งคืน visitor ID กับผลการระบุตัวตนให้คุณในรูปแบบ reactive ref

การติดตั้ง

npm install @tracio/vue @tracio/sdk

vue (เวอร์ชัน 3.4 หรือใหม่กว่า) เป็น peer dependency และคาดว่าได้ติดตั้งไว้ในแอปของคุณอยู่แล้ว

การตั้งค่า

ติดตั้งปลั๊กอินบนอินสแตนซ์แอปของคุณด้วย app.use(TracioPlugin, options) โดย options รับได้ทั้งแบบ config แบน ๆ (พร้อม publicKey) หรือแบบ { config } ที่บรรจุ TracioConfig ฉบับเต็ม

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

composable แต่ละตัวจะส่งคืน Vue ref สำหรับ data, isLoading, error และ isFetched พร้อมกับเมธอด getData สำหรับดึงข้อมูล (ซ้ำ) แบบ imperative โปรดสังเกตว่าเมธอดแบบ imperative นี้มีชื่อว่า getData บน Vue composable ทุกตัว — ไม่มี getId แบบสไตล์ React

useVisitorId()

ส่งคืนตัวระบุผู้เยี่ยมชม (visitor identifier) ที่เสถียร พร้อมสถานะการโหลดและข้อผิดพลาด

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

useTracioResult(opts?)

ส่งคืน TracioResult ฉบับเต็ม (visitor ID พร้อมการตรวจจับบอต) โดย opts.immediate มีค่าเริ่มต้นเป็น true หากส่ง { immediate: false } เข้าไปจะเลื่อนการดึงข้อมูลออกไปจนกว่าคุณจะเรียก getData() — เช่น หลังฉากกั้นการยินยอม (consent gate)

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

useTracio()

ทางออกฉุกเฉิน (escape hatch) ที่ส่งคืน TracioInstance ที่อยู่เบื้องหลัง (หรือ undefined เมื่อไม่มีปลั๊กอินติดตั้งอยู่เหนือคอมโพเนนต์) สำหรับการใช้งานขั้นสูง โดยจะส่งคืนอินสแตนซ์นั้นโดยตรง — ไม่มีอ็อบเจ็กต์ห่อหุ้ม (wrapper object) ให้ destructure

const tracio = useTracio()

ตัวอย่างแบบเต็ม

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

ขั้นตอนถัดไป

• JavaScript SDK Reference — API แกนหลัก @tracio/sdk ที่ composable เหล่านี้สร้างต่อยอดขึ้นมา
• Error Handling — รหัสข้อผิดพลาดและกลยุทธ์การลองใหม่ (retry)
• SDKs overview — ทุกแพ็กเกจของแต่ละเฟรมเวิร์กในภาพรวมเดียว