Vue SDK

@tracio/vue पैकेज कोर @tracio/sdk को रैप करता है और आदर्श Vue 3 primitives उपलब्ध कराता है: एक plugin जो agent को माउंट करता है, और composables जो आपको visitor ID तथा identification परिणाम reactive refs के रूप में देते हैं।

Installation

npm install @tracio/vue @tracio/sdk

vue (3.4 या नया) एक peer dependency है और यह अपेक्षित है कि यह आपके ऐप में पहले से इंस्टॉल हो।

Setup

app.use(TracioPlugin, options) के साथ अपने ऐप instance पर plugin इंस्टॉल करें। options या तो एक flat 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 data, isLoading, error और isFetched के लिए Vue refs लौटाता है, साथ ही imperative रूप से (पुनः) fetch करने के लिए एक getData method भी। ध्यान दें कि हर Vue composable पर imperative method का नाम getData है — कोई React-शैली का getId नहीं है।

useVisitorId()

loading और error state के साथ स्थिर 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 तथा bot detection)। opts.immediate का डिफ़ॉल्ट true है; fetch को तब तक टालने के लिए { immediate: false } पास करें जब तक आप getData() न कॉल करें — उदाहरण के लिए consent gate के पीछे।

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

useTracio()

एक escape hatch जो advanced उपयोग के लिए अंतर्निहित TracioInstance लौटाता है (या undefined जब component के ऊपर कोई plugin इंस्टॉल नहीं होता)। यह instance को सीधे लौटाता है — destructure करने के लिए कोई wrapper object नहीं है।

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 संदर्भ — कोर @tracio/sdk API जिस पर composables आधारित हैं
• Error Handling — error codes और retry रणनीतियाँ
• SDKs अवलोकन — एक नज़र में हर framework पैकेज