Vue

Suggest Edits

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.

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

yarn add @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.

// 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.

<!-- 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.

Updated 2 months ago