FingerprintJS Pro Vue 3

FingerprintJS Pro Vue is an easy-to-use Vue 3 plugin for FingerprintJS Pro.

Installation

To install the plugin run:

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

Or:

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

Getting started

To identify visitors, you'll need a FingerprintJS Pro account (you can sign up for free). You can learn more about API keys in the official FingerprintJS Pro documentation.

Register our plugin in your Vue application:

import { createApp } from 'vue';
import App from './App.vue';
import { FpjsVueOptions, 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,
    },
  } as FpjsVueOptions)
  .mount('#app');

Refer to the example usages below.

Composition API

This plugin exposes the useVisitorData function that you can use like this:

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

Options API

Our plugin injects $fpjs object into your components, and you can use it like this:

<script lang='ts'>
import { defineComponent } from 'vue';

export default defineComponent({
  methods: {
    async getVisitorData() {
      const visitorData = await this.$fpjs.getVisitorData({
        extendedResult: true
      });

      // Do something with visitorData
    }
  }
});
</script>

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

Mixins

For your convenience, we also provide mixins that handle all query states.

For the extended result:

<script lang='ts'>
import { defineComponent } from 'vue';
import { fpjsGetVisitorDataExtendedMixin } from '@fingerprintjs/fingerprintjs-pro-vue-v3';

export default defineComponent({
  // Include our mixin
  mixins: [fpjsGetVisitorDataExtendedMixin],
  async mounted() {
    // You can also fetch data on mount
    // await this.$getVisitorDataExtended();
  }
});
</script>

<template>
  <div>
    <button @click='$getVisitorDataExtended'>
      Get visitor data
    </button>
    <span v-if='visitorDataExtended.isLoading'>
      Loading...
    </span>
    <span v-else-if='visitorDataExtended.isError'>
      Error: {{ visitorDataExtended.error }}
    </span>
    <span v-else>
      <!--Do something with visitorData here-->
    </span>
  </div>
</template>

For the default result:

<script lang='ts'>
import { defineComponent } from 'vue';
import { fpjsGetVisitorDataMixin } from '@fingerprintjs/fingerprintjs-pro-vue-v3';

export default defineComponent({
  // Include our mixin
  mixins: [fpjsGetVisitorDataMixin],
  async mounted() {
    // You can also fetch data on mount
    // await this.$getVisitorData();
  }
});
</script>

<template>
  <div>
    <button @click='$getVisitorData'>
      Get visitor data
    </button>
    <span v-if='visitorData.isLoading'>
      Loading...
    </span>
    <span v-else-if='visitorData.isError'>
      Error: {{ visitorData.error }}
    </span>
    <span v-else>
      <!--Do something with visitorData here-->
    </span>
  </div>
</template>

Nuxt

This plugin works with Nuxt out of the box, however, you need to register it on the client side only.

// plugins/fingerprintjs.client.ts
import { defineNuxtPlugin, useRuntimeConfig } from '#app';
import { fpjsPlugin, FpjsVueOptions } from '@fingerprintjs/fingerprintjs-pro-vue-v3';

export default defineNuxtPlugin((nuxtApp) => {
  const config = useRuntimeConfig();

  nuxtApp.vueApp.use(fpjsPlugin, {
    loadOptions: {
      apiKey: config.public.API_KEY,
    },
  } as FpjsVueOptions);
});

//nuxt.config.ts

import { defineNuxtConfig } from 'nuxt';
import path from 'path';

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      // Inject FingerprintJS Pro API key
      API_KEY: process.env.API_KEY,
    },
  }
});

You can also check example Nuxt Application.

Documentation

You can find detailed documentation and API reference here.

Caching strategy

⚠️ WARNING If you use data from the extendedResult, please pay additional attention to caching strategy.

FingerprintJS Pro uses API calls as the basis for billing. Our best practices strongly recommend using cache to optimize API calls rate. The Library uses the SessionStorage cache strategy by default.

Some fields from the extendedResult (e.g ip or lastSeenAt) might change for the same visitor. If you need exact current data, it is recommended to pass ignoreCache=true inside the getVisitorData function

Support and feedback

For support or to provide feedback, please raise an issue on our issue tracker. If you require private support, please email us at oss-support@fingerprintjs.com. If you'd like to have a similar Vue library for the open-source FingerprintJS, consider raising an issue in our issue tracker.

Examples

You can find the following examples in the examples directory:

• SPA Application
• Nuxt Application