Device Intelligence สำหรับ Vue

<script setup>
import { ref, watch } from 'vue'
import { useTracioResult } from '@tracio/vue'
const { data, isLoading, error, getData } = useTracioResult()
const history = ref([])
watch(data, (result) => {
  if (result?.visitorId) {
    history.value.push({
      id: result.visitorId,
      timestamp: new Date().toISOString(),
    })
  }
})
</script>
<template>
  <div v-if="isLoading">Identifying...</div>
  <div v-else-if="error">Error: {{ error.message }}</div>
  <div v-else-if="data">
    <p>Visitor: {{ data.visitorId }}</p>
    <p>Bot: {{ data.bot.detected ? 'detected' : 'clear' }} ({{ data.bot.confidence }}/100)</p>
    <button @click="getData">Re-identify</button>
  </div>
</template>