Skip to main content
Use the Vue SDK when your app is built with Vue 3. It provides a plugin and composables (useKeverdVisitorData) so you can collect device/event data in components.

​
When to use this SDK

  • Vue 3 apps.
  • You want composables for login/checkout/registration flows.
  • You need get() or verifyLogin from Vue components.

​
Quick start

​
1. Install

// bash

npm install @keverdjs/vue
# or: yarn add @keverdjs/vue

​
2. Register plugin

//javascript

import { createApp } from 'vue';
import KeverdVue from '@keverdjs/vue';
import App from './App.vue';

const app = createApp(App);
app.use(KeverdVue, { apiKey: 'YOUR_PUBLIC_API_KEY', endpoint: 'https://api.keverd.com' });
app.mount('#app');

​
3. Call get() in a component

Use the useKeverdVisitorData composable in any component. Call get() at the moment you want to fingerprint — typically on login, checkout, or form submission.

​
Basic usage (Composition API)

// LoginForm.vue
<script setup>
import { useKeverdVisitorData } from '@keverdjs/vue';

const { get } = useKeverdVisitorData();

async function handleLogin() {
  const result = await get();

  // Send both IDs to your backend alongside login credentials
  await fetch('/api/login', {
    method: 'POST',
    body: JSON.stringify({
      email,
      password,
      event_id: result.event_id,
      visitor_id: result.fingerprint,
    }),
  });
}
</script>

<template>
  <button @click="handleLogin">Log in</button>
</template>

​
Trigger on component mount

If you want fingerprinting to happen automatically when a page loads (e.g. a checkout page), use onMounted: 
// CheckoutPage.vue

<script setup>
import { onMounted } from 'vue';
import { useKeverdVisitorData } from '@keverdjs/vue';

const { get } = useKeverdVisitorData();

onMounted(async () => {
  const result = await get();
  console.log('visitor:', result.fingerprint);
  console.log('event:  ', result.event_id);
});
</script>

​
Options API

// LoginForm.vue (Options API)

import { useKeverdVisitorData } from '@keverdjs/vue';

export default {
  setup() {
    const { get } = useKeverdVisitorData();
    return { get };
  },
  methods: {
    async handleLogin() {
      const result = await this.get();
      // use result.event_id, result.fingerprint
    },
  },
};