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

# Vue

The [Fingerprint Vue SDK](https://github.com/fingerprintjs/vue) integrates Fingerprint into Vue 3 applications. It supports all capabilities of the JavaScript agent including a built-in [caching mechanism](/reference/js-agent-start-function#cache). See the [Vue quickstart](/docs/vue-quickstart) for a step-by-step guide to get started.

### How to install

Add `@fingerprint/vue` as a dependency to your application.

<CodeGroup>
  ```shell NPM theme={"theme":"github-dark-dimmed"}
  npm install @fingerprint/vue
  ```

  ```shell Yarn theme={"theme":"github-dark-dimmed"}
  yarn add @fingerprint/vue
  ```

  ```shell PNPM theme={"theme":"github-dark-dimmed"}
  pnpm add @fingerprint/vue
  ```
</CodeGroup>

Register `FingerprintPlugin` in your application. You need to specify your public API key and other configuration options based on your chosen region and active integration.

```javascript Vue 3 theme={"theme":"github-dark-dimmed"}
// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import { FingerprintPlugin } from '@fingerprint/vue';

const app = createApp(App);

app
  .use(FingerprintPlugin, {
    apiKey: 'PUBLIC_API_KEY',
    endpoints: 'https://metrics.yourwebsite.com',
    region: 'us',
  })
  .mount('#app');
```

Use the `useVisitorData` hook in your components to identify visitors.

```vue Vue 3 theme={"theme":"github-dark-dimmed"}
<!-- src/App.vue -->
<script setup>
import { useVisitorData } from '@fingerprint/vue';

const { data, error, isLoading, getData } = useVisitorData({ immediate: true });
</script>

<template>
  <div>
    <button @click="getData()">Reload data</button>
    <p v-if="isLoading">Loading...</p>
    <p v-else>Visitor ID: {{ data?.visitor_id }}</p>
    <p v-if="error">{{ error.message }}</p>
    <pre v-if="data">{{ JSON.stringify(data, null, 2) }}</pre>
  </div>
</template>
```

### Documentation

You can find the full documentation in the official [GitHub repository](https://github.com/fingerprintjs/vue). The repository also contains [example applications](https://github.com/fingerprintjs/vue/tree/main/examples) demonstrating the usage of the library.

### Migration guide for Vue SDK v2.0.0

Version 2.0.0 of the Vue SDK switches from JavaScript agent v3 to [JavaScript agent v4](/reference/migrating-from-v3-to-v4).

1. Install a new version of the package:

<CodeGroup>
  ```bash NPM theme={"theme":"github-dark-dimmed"}
  npm install @fingerprint/vue
  ```

  ```bash Yarn theme={"theme":"github-dark-dimmed"}
  yarn add @fingerprint/vue
  ```

  ```bash PNPM theme={"theme":"github-dark-dimmed"}
  pnpm add @fingerprint/vue
  ```
</CodeGroup>

2. Update the plugin import and options.

The default caching strategy has changed from `sessionStorage` caching to **no caching by default**, aligned with the underlying [JavaScript agent v4 default](/reference/js-agent-start-function#cache). To preserve the previous behavior, explicitly configure caching in the plugin options (see example below).

```javascript Change plugin imports and usage theme={"theme":"github-dark-dimmed"}
// [!code --:5]
import {
  fpjsPlugin,
  FingerprintJSPro,
  CacheLocation,
} from '@fingerprintjs/fingerprintjs-pro-vue-v3';
// [!code ++]
import { FingerprintPlugin } from '@fingerprint/vue';

// [!code --:12]
app.use(fpjsPlugin, {
  cacheLocation: CacheLocation.LocalStorage,
  cacheTimeInSeconds: 60,
  loadOptions: {
    apiKey: 'PUBLIC_API_KEY',
    endpoint: ['https://metrics.yourwebsite.com', FingerprintJSPro.defaultEndpoint],
    scriptUrlPattern: [
      'https://metrics.yourwebsite.com/web/v<version>/<apiKey>/loader_v<loaderVersion>.js',
      FingerprintJSPro.defaultScriptUrlPattern,
    ],
  },
});
// [!code ++:8]
app.use(FingerprintPlugin, {
  cache: {
    storage: 'sessionStorage',
    duration: 3600,
  },
  apiKey: 'PUBLIC_API_KEY',
  endpoints: ['https://metrics.yourwebsite.com'],
});
```

3. Update `useVisitorData` calls and result field names:

```javascript Update visitor data usage theme={"theme":"github-dark-dimmed"}
// [!code --]
import { useVisitorData } from '@fingerprintjs/fingerprintjs-pro-vue-v3';
import { useVisitorData } from '@fingerprint/vue'; // [!code ++]

// [!code --:4]
const { data, isLoading, getData } = useVisitorData(
  { timeout: 1000, ignoreCache: true },
  { immediate: false },
);
// `immediate` can now be set in the first argument // [!code ++:3]
// `ignoreCache` is no longer available; configure cache on the plugin instead
const { data, isLoading, getData } = useVisitorData({ timeout: 1000, immediate: false });

// [!code --:2]
const { visitorId, requestId } = await getData();
console.log(visitorId, requestId);
// [!code ++:2]
const { visitor_id, event_id } = await getData();
console.log(visitor_id, event_id);
```

The v4 agent uses snake\_case field names. `requestId` is now `event_id`, and `visitorId` is now `visitor_id`.