Vue SDK for TraceTail browser fingerprinting - over 99.5% accuracy
npm install @tracetail/vueOfficial Vue 3 SDK for TraceTail - Enterprise Browser Fingerprinting with over 99.5% accuracy.




- 🎯 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
``bash`
npm install @tracetail/vue
`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');
`
` Visitor: {{ visitorId }} Risk: {{ riskScore < 0.3 ? 'Low' : 'High' }}vue
Loading...
`
Get visitor fingerprint data:
`js`
const {
visitorId, // Ref
confidence, // Ref
riskScore, // Ref
fraudulent, // Ref
signals, // Ref
loading, // Ref
error, // Ref
retry, // () => Promise
refresh // () => Promise
} = useFingerprint();
Track user events:
`js
const trackEvent = useTrackEvent();
const handleLogin = async () => {
const result = await trackEvent('login', {
username: 'user@example.com'
});
if (result.fraudulent) {
// Handle fraud
}
};
`
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
}
};
`
`vue
`
`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`
`js`
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@tracetail/nuxt'],
tracetail: {
apiKey: process.env.TRACETAIL_API_KEY
}
});
Full TypeScript support with type definitions:
`vue`
Also works with Options API:
`vue`
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
}
}
}]]
}
});
`
`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
}
}
`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[];
}
``
- 📚 Documentation
- 💬 Discord Community
- 📧 Email Support
- 🐛 Issue Tracker
MIT - see LICENSE for details.