Vue.js

The Fingerprint Vue SDK is an easy way to integrate Fingerprint into your Vue or Nuxt application. Both Vue 2.6.x and Vue 3.1.x are supported. 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 or @fingerprintjs/fingerprintjs-pro-vue-v2 as a dependency to your application via npm or yarn.

npm install @fingerprintjs/fingerprintjs-pro-vue-v3

npm install @fingerprintjs/fingerprintjs-pro-vue-v2

yarn add @fingerprintjs/fingerprintjs-pro-vue-v3

yarn add @fingerprintjs/fingerprintjs-pro-vue-v2

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,
  // defaultEndpoint,
  // defaultScriptUrlPattern
} from '@fingerprintjs/fingerprintjs-pro-vue-v3';

const app = createApp(App);

app
  .use(fpjsPlugin, {
    loadOptions: {
      apiKey: "<PUBLIC_API_KEY>",
      // endpoint: ["<CUSTOM_ENDPOINT>", defaultEndpoint],
      // scriptUrlPattern: ["<CUSTOM_SCRIPT_URL>", defaultScriptUrlPattern],
      // region: "eu"
    },
  })
  .mount('#app');

// src/main.js
import Vue from 'vue';
import App from './App.vue';
import {
  fpjsPlugin,
  // defaultEndpoint,
  // defaultScriptUrlPattern
} from '@fingerprintjs/fingerprintjs-pro-vue-v2';

const app = new Vue(App);
Vue.use(fpjsPlugin, {
  loadOptions: {
    apiKey: "<PUBLIC_API_KEY>",
    // endpoint: ["<CUSTOM_ENDPOINT>", defaultEndpoint],
    // scriptUrlPattern: ["<CUSTOM_SCRIPT_URL>", defaultScriptUrlPattern],
    // region: "eu"
  },
});

app.$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>

<!-- src/App.vue -->
<script setup lang='js'>
import Vue from 'vue';
import {
  fpjsGetVisitorDataExtendedMixin
} from '@fingerprintjs/fingerprintjs-pro-vue-v2';

export default Vue.extend({
  mixins: [fpjsGetVisitorDataExtendedMixin],
  async mounted() {
    await this.$getVisitorDataExtended();
  }
});
</script>

<template>
  <div>
    <button @click='$getVisitorDataExtended({ignoreCache: true})'>
      Get visitor data
    </button>
    <p v-if='visitorDataExtended?.isLoading'>Loading...</p>
    <p v-else>VisitorId: {{ visitorDataExtended?.data?.visitorId }}</p>
    <p v-if='visitorDataExtended?.error'>
      {{ visitorDataExtended.error.message }}
    </p>
    <pre v-else>{{ visitorDataExtended.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.