Vue Quickstart

// bash

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

//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');

// 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>

// 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>

// 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
    },
  },
};