Skip to main content
The Fingerprint Vue SDK integrates Fingerprint into Vue 3 applications. It supports all capabilities of the JavaScript agent including a built-in caching mechanism. See the Vue quickstart for a step-by-step guide to get started.

​
How to install

Add @fingerprint/vue as a dependency to your application. 
npm install @fingerprint/vue
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.
Vue 3
// 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 3
<!-- 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. The repository also contains example applications 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.
  1. Install a new version of the package:
npm install @fingerprint/vue
  1. 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. To preserve the previous behavior, explicitly configure caching in the plugin options (see example below).
Change plugin imports and usage
import {
  fpjsPlugin,
  FingerprintJSPro,
  CacheLocation,
} from '@fingerprintjs/fingerprintjs-pro-vue-v3';
import { FingerprintPlugin } from '@fingerprint/vue';

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,
    ],
  },
});
app.use(FingerprintPlugin, {
  cache: {
    storage: 'sessionStorage',
    duration: 3600,
  },
  apiKey: 'PUBLIC_API_KEY',
  endpoints: ['https://metrics.yourwebsite.com'],
});
  1. Update useVisitorData calls and result field names:
Update visitor data usage
import { useVisitorData } from '@fingerprintjs/fingerprintjs-pro-vue-v3';
import { useVisitorData } from '@fingerprint/vue'; 

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

const { visitorId, requestId } = await getData();
console.log(visitorId, requestId);
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.