Vue

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 JavaScript agent and provides a built-in caching mechanism. You can view the 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

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.