@tracetail/vue
v3.1.2
Published
Vue 3 plugin and composables for TraceTail browser fingerprinting, with 99.6% accuracy.
Downloads
1,343,859
Maintainers
Readme
@tracetail/vue
Vue 3 plugin and composables for TraceTail browser fingerprinting, with 99.6% accuracy: a stable visitor ID for every browser, without cookies or storage.
Install
npm install @tracetail/vueQuick start
// main.ts
import { createApp } from 'vue';
import { TraceTailPlugin } from '@tracetail/vue';
import App from './App.vue';
createApp(App)
.use(TraceTailPlugin, { apiKey: 'YOUR_API_KEY', endpoint: 'https://tracetail.io/api' })
.mount('#app');<script setup lang="ts">
import { useFingerprint } from '@tracetail/vue';
const { visitorId, loading } = useFingerprint();
</script>
<template>
<form method="post" action="/checkout">
<input type="hidden" name="visitorId" :value="visitorId ?? ''" />
<span v-if="loading">Identifying…</span>
</form>
</template>Create a free API key at tracetail.io/auth. The plugin options are those of @tracetail/js: apiKey, endpoint, timeout and debug. Without an API key (or without the plugin) the composables run keyless: the visitor ID is computed in the browser and nothing is sent anywhere.
useFingerprint(options?)
| Option | Description |
| --- | --- |
| verbose | Include the collected signals in fingerprint.value.components. |
| detailed | Also return riskAssessment and botDetection (needs an API key). |
| immediate | Identify when the component mounts. Default: true. |
It returns refs and functions:
| Field | Description |
| --- | --- |
| fingerprint | The result (visitorId, confidence, processingTime, requestId, isBot and so on), or null until identification completes. If the API call failed, fingerprint.value.error holds { status, code, message } and visitorId is still set. |
| visitorId | The visitor ID, or null until identification completes. |
| loading | true while identifying. |
| error | Set when identification itself failed, for example when called without a DOM. |
| generate() | Identify, reusing the page's cached result when there is one. |
| regenerate() | Identify again, bypassing the cache. |
All components share the app's client and its result, so a page identifies once. The composable never retries on its own; call generate() to retry a failed registration with its existing request token. regenerate() starts a new identification and can count as another request. It identifies in onMounted, which doesn't run during server-side rendering.
Other exports
useTraceTail()returns the app'sTraceTailclient, which is also available asthis.$tracetailin the Options API.useComplianceContext()returns browser hints (Global Privacy Control, Do Not Track and the inferred region) for deciding whether to ask for consent before identifying. You are responsible for any consent your visitors' jurisdiction requires.- The package also re-exports
TraceTail,getComplianceContextand the types from@tracetail/js.
Verify on your server
The visitor ID comes from the browser, so your backend can't tell a real one from one a script made up. Before you trust it for a sign-up, login or payment, send fingerprint.value.requestId along and look it up with the Server API and a secret server key (tts_…, created in Settings → API keys and kept on your server):
curl https://tracetail.io/api/v1/identifications/$REQUEST_ID \
-H "Authorization: Bearer $TRACETAIL_SERVER_KEY"Check that the returned visitorId is the one your page sent. The docs have the full response and Node.js and Python examples.
AI coding agents
Claude Code, Codex, Cursor and other agents can add TraceTail on their own. Connect the MCP server at https://tracetail.io/mcp (no account or key needed; in Claude Code, claude mcp add --transport http tracetail https://tracetail.io/mcp), install the skill with npx skills add https://tracetail.io, or point the agent at llms.txt. An agent gets the API keys through a setup link: it hands you one link, where you sign in with an emailed code and add a card or continue free, and receives a key for each site.
Pricing
Every account includes 1,000 identification requests a month, with no card required. Beyond that it costs $0.10 per 1,000 requests. See pricing.
License
MIT
