Vue SDK

החבילה @tracio/vue עוטפת את חבילת הליבה @tracio/sdk וחושפת פרימיטיבים אידיומטיים של Vue 3: תוסף (plugin) שמטעין את הסוכן, ו‑composables שמספקים לך את מזהה המבקר ואת תוצאת הזיהוי כ‑refs ריאקטיביים.

התקנה

npm install @tracio/vue @tracio/sdk

‏vue (גרסה 3.4 ומעלה) היא peer dependency, ומצופה שכבר תהיה מותקנת באפליקציה שלך.

הגדרה

התקן את התוסף על מופע האפליקציה שלך באמצעות app.use(TracioPlugin, options). האפשרויות מקבלות או תצורה שטוחה (עם 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 מחזיר refs של Vue עבור data,‏ isLoading,‏ error ו‑isFetched, וכן מתודה getData לשליפה (חוזרת) אימפרטיבית. שים לב: המתודה האימפרטיבית נקראת getData בכל composable של Vue — אין getId בסגנון React.

useVisitorId()

מחזיר את מזהה המבקר היציב יחד עם מצב הטעינה והשגיאה.

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 המלא (מזהה המבקר בתוספת זיהוי בוטים). ברירת המחדל של opts.immediate היא true; העבר { immediate: false } כדי לדחות את השליפה עד שתקרא ל‑getData() — למשל מאחורי שער הסכמה (consent gate).

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

useTracio()

פתח מילוט (escape hatch) שמחזיר את ה‑TracioInstance הבסיסי (או undefined כאשר לא מותקן תוסף מעל הרכיב) לשימושים מתקדמים. הוא מחזיר את המופע ישירות — אין אובייקט עוטף לפירוק (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 — ה‑API של הליבה @tracio/sdk שעליו נבנים ה‑composables
• טיפול בשגיאות — קודי שגיאה ואסטרטגיות ניסיון חוזר (retry)
• סקירת SDKs — כל חבילת framework במבט אחד