@tracetail/vue

Official Vue 3 SDK for TraceTail - Enterprise Browser Fingerprinting with over 99.5% accuracy.


Features

- 🎯 Over 99.5% Accuracy - Industry-leading browser fingerprinting
- ⚡ <25ms Performance - Lightning-fast fingerprint generation
- 🛡️ Fraud Detection - Built-in risk scoring and fraud prevention
- 🔄 Real-time Updates - Live visitor tracking and analytics
- 📦 27KB Bundle - Lightweight and optimized
- 🎨 Vue 3 Composition API - Modern, reactive API design

Installation

``bash
npm install @tracetail/vue
`

Quick Start

$3

`js
// main.js
import { createApp } from 'vue';
import { TraceTailPlugin } from '@tracetail/vue';
import App from './App.vue';

const app = createApp(App);

app.use(TraceTailPlugin, {
apiKey: 'your-api-key-here',
config: {
enhanced: true
}
});

app.mount('#app');
`

$3

`vue



`

Composables

$3

Get visitor fingerprint data:

`js
const {
visitorId, // Ref
confidence, // Ref 0-1
riskScore, // Ref 0-1
fraudulent, // Ref
signals, // Ref
loading, // Ref
error, // Ref
retry, // () => Promise
refresh // () => Promise
} = useFingerprint();
`

$3

Track user events:

`js
const trackEvent = useTrackEvent();

const handleLogin = async () => {
const result = await trackEvent('login', {
username: 'user@example.com'
});

if (result.fraudulent) {
// Handle fraud
}
};
`

$3

Advanced fraud detection:

`js
const { checkFraud, fraudSignals, isChecking } = useFraudDetection();

const handleCheckout = async (orderData) => {
const result = await checkFraud({
amount: orderData.total,
items: orderData.items
});

if (result.block) {
// Block transaction
} else if (result.challenge) {
// Show additional verification
}
};
`

Examples

$3

`vue



`

$3

`js
// main.js
app.directive('fraud-detection', {
mounted(el, binding) {
const { riskScore } = useFingerprint();

watch(riskScore, (score) => {
if (score > (binding.value || 0.5)) {
el.classList.add('high-risk');
el.disabled = true;
}
});
}
});
`

Usage:
`vue

Complete Purchase

`

$3

`js
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@tracetail/nuxt'],
tracetail: {
apiKey: process.env.TRACETAIL_API_KEY
}
});
`

TypeScript Support

Full TypeScript support with type definitions:

`vue

`

Options API Support

Also works with Options API:

`vue

`

Testing

Mock TraceTail in tests:

`js
import { mount } from '@vue/test-utils';
import { TraceTailPlugin } from '@tracetail/vue';

const wrapper = mount(Component, {
global: {
plugins: [[TraceTailPlugin, {
apiKey: 'test-key',
config: {
testMode: true,
mockData: {
visitorId: 'test-123',
riskScore: 0.1
}
}
}]]
}
});
`

API Reference

$3

`js
{
apiKey: string; // Required
config?: {
enhanced?: boolean; // Enhanced accuracy (default: true)
timeout?: number; // Request timeout ms (default: 5000)
endpoint?: string; // API endpoint
testMode?: boolean; // Test mode
mockData?: object; // Mock data for testing
}
}
`

$3

`typescript
interface Fingerprint {
visitorId: string;
confidence: number; // 0-1
riskScore: number; // 0-1
fraudulent: boolean;
signals: SignalData;
timestamp: Date;
}

interface FraudResult {
block: boolean;
challenge: boolean;
allow: boolean;
riskScore: number;
reasons: string[];
}
``

Support

- 📚 Documentation
- 💬 Discord Community
- 📧 Email Support
- 🐛 Issue Tracker

License

MIT - see LICENSE for details.