> ## Documentation Index
> Fetch the complete documentation index at: https://v2.developer.keverd.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Vue Quickstart

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

```text theme={null}
// bash

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

### 2. Register plugin

```text theme={null}
//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)

```text theme={null}
// 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`:

```text theme={null}
// 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

```text theme={null}
// 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
    },
  },
};
```