Vue SDK

@tracio/vue paketi, çekirdek @tracio/sdk paketini sarmalar ve deyimsel Vue 3 primitifleri sunar: ajanı bağlayan bir plugin ve size ziyaretçi kimliğini ve tanımlama sonucunu reaktif ref'ler olarak veren composable'lar.

Kurulum

npm install @tracio/vue @tracio/sdk

vue (3.4 veya daha yeni) bir peer bağımlılığıdır ve uygulamanızda zaten kurulu olması beklenir.

Yapılandırma

Plugin'i uygulama örneğinize app.use(TracioPlugin, options) ile kurun. Seçenekler ya düz bir yapılandırmayı (publicKey ile) ya da tam bir TracioConfig taşıyan { config } biçimini kabul eder.

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

Composable'lar

Her composable, data, isLoading, error ve isFetched için Vue ref'leri döndürür, ayrıca imperatif olarak (yeniden) veri çekmek için bir getData metodu sağlar. Şuna dikkat edin: imperatif metot her Vue composable'ında getData olarak adlandırılır — React tarzı bir getId yoktur.

useVisitorId()

Kararlı ziyaretçi tanımlayıcısını, yükleme ve hata durumuyla birlikte döndürür.

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

useTracioResult(opts?)

Tam TracioResult değerini döndürür (ziyaretçi kimliği artı bot tespiti). opts.immediate varsayılan olarak true'dur; veri çekmeyi getData() çağrısına kadar ertelemek için { immediate: false } geçirin — örneğin bir onay engelinin arkasında.

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

useTracio()

İleri düzey kullanım için altta yatan TracioInstance'ı (veya bileşenin üzerinde herhangi bir plugin kurulu değilse undefined) döndüren bir kaçış kapısı. Örneği doğrudan döndürür — destructure edilecek bir sarmalayıcı nesne yoktur.

const tracio = useTracio()

Tam örnek

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

Sonraki adımlar

• JavaScript SDK Referansı — composable'ların üzerine inşa edildiği çekirdek @tracio/sdk API'si
• Hata Yönetimi — hata kodları ve yeniden deneme stratejileri
• SDK'lara genel bakış — her framework paketi bir bakışta