@tracio/vue 패키지는 코어 @tracio/sdk를 감싸 관용적인 Vue 3 프리미티브를 제공합니다. 에이전트를 마운트하는 플러그인과, 방문자 ID 및 식별 결과를 반응형 ref로 전달하는 컴포저블을 제공합니다.
npm install @tracio/vue @tracio/sdkvue(3.4 이상)는 peer dependency이며, 앱에 이미 설치되어 있다고 가정합니다.
app.use(TracioPlugin, options)로 앱 인스턴스에 플러그인을 설치하세요. 옵션은 플랫 구성(publicKey 포함) 또는 전체 TracioConfig를 담은 { config } 중 하나를 받습니다.
// main.tsimport { 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")각 컴포저블은 data, isLoading, error, isFetched에 대한 Vue ref와, 명령형으로 (다시) 가져오는 getData 메서드를 반환합니다. 참고로 명령형 메서드는 모든 Vue 컴포저블에서 getData라는 이름을 가집니다 — React 스타일의 getId는 없습니다.
안정적인 방문자 식별자를 로딩 및 오류 상태와 함께 반환합니다.
const { data, isLoading, error, isFetched, getData } = useVisitorId()// data: Ref<string | null> — the visitorId// getData(): Promise<void> — re-runs the underlying result fetch전체 TracioResult(방문자 ID 및 봇 탐지)를 반환합니다. opts.immediate는 기본값이 true입니다. { immediate: false }를 전달하면 getData()를 호출할 때까지 가져오기를 지연할 수 있습니다 — 예를 들어 동의 게이트 뒤에서 사용할 때입니다.
const { data, isLoading, error, isFetched, getData } = useTracioResult()// data: Ref<TracioResult | null>고급 사용을 위해 기저의 TracioInstance를 반환하는 이스케이프 해치입니다(컴포넌트 상위에 플러그인이 설치되지 않은 경우 undefined 반환). 인스턴스를 직접 반환하므로, 구조 분해할 래퍼 객체는 없습니다.
const tracio = useTracio()// main.tsimport { 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>@tracio/sdk API