Vue SDK

The @tracio/vue package wraps the core @tracio/sdk and exposes idiomatic Vue 3 primitives: a plugin that mounts the agent, and composables that hand you the visitor ID and identification result as reactive refs.

Installation

npm install @tracio/vue @tracio/sdk

vue (3.4 or newer) is a peer dependency and is expected to already be installed in your app.

Setup

Install the plugin on your app instance with app.use(TracioPlugin, options). The options accept either a flat config (with publicKey) or { config } carrying a full 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

Each composable returns Vue refs for data, isLoading, error, and isFetched, plus a getData method to (re-)fetch imperatively. Note the imperative method is named getData on every Vue composable — there is no React-style getId.

useVisitorId()

Returns the stable visitor identifier with loading and error state.

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

useTracioResult(opts?)

Returns the full TracioResult (visitor ID plus bot detection). opts.immediate defaults to true; pass { immediate: false } to defer the fetch until you call getData() — for example behind a consent gate.

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

useTracio()

Escape hatch that returns the underlying TracioInstance (or undefined when no plugin is installed above the component) for advanced use. It returns the instance directly — there is no wrapper object to destructure.

const tracio = useTracio()

Full example

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

Next steps

• JavaScript SDK Reference — the core @tracio/sdk API the composables build on
• Error Handling — error codes and retry strategies
• SDKs overview — every framework package at a glance