> ## 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/fingerprintjs-pro-vue) is an easy way to integrate Fingerprint into your Vue 3 or Nuxt application. The SDK supports all capabilities of the JavaScript agent and provides a built-in caching mechanism. You can view the [Vue quickstart](/docs/v3/vue-quickstart) for a step-by-step guide to get started.

### How to install

Add `@fingerprintjs/fingerprintjs-pro-vue-v3` as a dependency to your application via npm or yarn.

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

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

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

Register the plugin in your Vue.js application. You need to specify your public API key and other configuration options based on your chosen region and active integration.

```javascript Vue v3 theme={"theme":"github-dark-dimmed"}
// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import { fpjsPlugin, FingerprintJSPro } from '@fingerprintjs/fingerprintjs-pro-vue-v3';

const app = createApp(App);

app
  .use(fpjsPlugin, {
    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,
      ],
      // region: "eu"
    },
  })
  .mount('#app');
```

Use the `useVisitorData` hook (Vue v3) or the `fpjsGetVisitorDataExtendedMixin` mixin (Vue v2) in your components to identify visitors.

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

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

<template>
  <div>
    <button @click="getData({ ignoreCache: true })">Get visitor data</button>
    <p v-if="isLoading">Loading...</p>
    <p v-else>VisitorId: {{ data?.visitorId }}</p>
    <p v-if="error">{{ error.message }}</p>
    <pre v-if="data">{{ data }}</pre>
  </div>
</template>
```

### Documentation

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