@tracetail/vue

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

Quick 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?)

It returns refs and functions:

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's TraceTail client, which is also available as this.$tracetail in 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, getComplianceContext and 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