Vue

Device Intelligence for Vue

Vue 3 composable for device identification. Add visitor identification, bot detection, and smart signals to your Vue application in minutes.

Get Started Live Demo

Quick Install

Add the SDK to your project with your preferred package manager.

npmnpm install @tracio/client

yarnyarn add @tracio/client

pnpmpnpm add @tracio/client

Basic Usage

Get up and running with the minimal setup.

$vue

<script setup>
import { useTraceId } from '@tracio/client/vue'
const { visitorId, confidence } = useTraceId()
</script>
<template>
  <div>Visitor: {{ visitorId }}</div>
</template>

Advanced Patterns

Production-ready patterns with error handling, loading states, and advanced configuration.

Composable with Watch & Reactive Tracking — Click to expand

<script setup>
import { ref, watch } from 'vue'
import { useTraceId } from '@tracio/client/vue'
const { visitorId, confidence, isLoading, error, refetch } = useTraceId({
  apiKey: 'your-key',
  endpoint: '/fp/identify',
})
const history = ref([])
watch(visitorId, (newId) => {
  if (newId) {
    history.value.push({
      id: newId,
      timestamp: new Date().toISOString(),
    })
  }
})
</script>
<template>
  <div v-if="isLoading">Identifying...</div>
  <div v-else-if="error">Error: {{ error.message }}</div>
  <div v-else>
    <p>Visitor: {{ visitorId }}</p>
    <p>Confidence: {{ (confidence * 100).toFixed(1) }}%</p>
    <button @click="refetch">Re-identify</button>
  </div>
</template>