Using FingerprintJS Pro Vue.js library

This open-source library provides you with all necessary wrappers for using FingerprintJS Pro with Vue.js and Nuxt. We support Vue.js 2.6.x and Vue.js 3.1.x.

Sample usage with Vue.js 2

  1. Add @fingerprintjs/fingerprintjs-pro-vue-v2 as a dependency to your application via npm or yarn.
npm install @fingerprintjs/fingerprintjs-pro-vue-v2
yarn add @fingerprintjs/fingerprintjs-pro-vue-v2
  1. Register plugin in your Vue.js application.
import Vue from 'vue';
import App from './App.vue';
import { fpjsPlugin } from '@fingerprintjs/fingerprintjs-pro-vue-v2';

const app = new Vue(App);
const apiKey = '<public-api-key>'

Vue.use(fpjsPlugin, {
  loadOptions: {
    // Set your API Key
    apiKey,
  },
});

app.$mount('#app');
  1. Access $fpjs inside your components.
<script>
import Vue from 'vue';

export default {
  methods: {
    async getVisitorData() {
      const visitorData = await this.$fpjs.getVisitorData({
        extendedResult: true
      });
      // Use visitorData
    }
  }
};
</script>

<template>
  <button @click='getVisitorData'>Get visitor data</button>
</template>

Mixins

Mixins that handle all query states are also supported. You can find the full documentation with examples in the official GitHub repository.

Sample usage with Vue.js 3

  1. 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
  1. Register plugin in your Vue.js application.
import { createApp } from 'vue';
import App from './App.vue';
import { fpjsPlugin } from '@fingerprintjs/fingerprintjs-pro-vue-v3';

const app = createApp(App);

const apiKey = '<public-api-key>'

app
  .use(fpjsPlugin, {
    loadOptions: {
      // Provide your API key here
      apiKey,
    },
  })
  .mount('#app');
  1. You can now fetch the visitorData using Composition API.
<script setup>
import { useVisitorData } from '@fingerprintjs/fingerprintjs-pro-vue-v3';
import { watch } from 'vue';

const { data, error, isLoading, getData } = useVisitorData(
  { extendedResult: true }, 
  // Set to true to fetch data on mount
  { immediate: false }
);

watch(data, (currentData) => {
  if (currentData) {
    // Do something with the data
  }
});
</script>

<template>
  <button @click='getData'>Get visitor data</button>
</template>

Documentation

You can find the full documentation along with examples in the official GitHub repository.


Did this page help you?