Skip to main content

​
JavaScript agent v4 support coming soon

This client SDK currently supports JavaScript agent v3. If you need JavaScript agent v4 today, use it directly or see the current integration compatibility table.
The Fingerprint Vue SDK is an easy way to integrate Fingerprint into your Vue 3 or Nuxt application. The SDK supports all capabilities of the JS agent and provides a built-in caching mechanism. You can view our 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. 
npm install @fingerprintjs/fingerprintjs-pro-vue-v3
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.
Vue v3
// 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 v3
<!-- 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. The repository also contains example applications demonstrating the usage of the library.