FingerprintJS Pro Vue 3

FingerprintJS Pro Vue is an easy way to integrate Fingerprint Pro into your Vue 3 application.

Installation

To install the plugin run:

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

Or:

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

Getting started

To identify visitors, you'll need a FingerprintJS Pro account (you can sign up for free). Get your API key and get started with the FingerprintJS Pro documentation.

Register our plugin in your Vue application.

• Set a region if you have chosen a non-global region during registration.
• Set endpoint and scriptUrlPattern if you are using one of our proxy integrations to increase the accuracy and effectiveness of visitor identification.

import { createApp } from 'vue';
import App from './App.vue';
import {
  fpjsPlugin,
  FpjsVueOptions,
  // defaultEndpoint,
  // defaultScriptUrlPattern,
} from '@fingerprintjs/fingerprintjs-pro-vue-v3';

const app = createApp(App);

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

app
  .use(fpjsPlugin, {
    loadOptions: {
      apiKey: '<your-public-api-key>',
      // region: 'eu',
      // endpoint: ['metrics.yourwebsite.com', defaultEndpoint],
      // scriptUrlPattern: ['metrics.yourwebsite.com/agent-path', defaultScriptUrlPattern],
    },
  } as FpjsVueOptions)
  .mount('#app');

You can use the plugin with Composition API, Options API, or Mixins, with or without Nuxt. See the usage examples below.

Composition API

The plugin provides a useVisitorData function you can use to identify visitors:

<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

The plugin injects a $fpjs object into your components that you can use to identify visitors:

<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

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

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

  nuxtApp.vueApp.use(fpjsPlugin, {
    loadOptions: {
      apiKey: config.public.API_KEY,
      // region: 'eu',
      // endpoint: ['metrics.yourwebsite.com', defaultEndpoint],
      // scriptUrlPattern: ['metrics.yourwebsite.com/agent-path', defaultScriptUrlPattern],
    },
  } 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,
    },
  }
});

See the example Nuxt Application for more details.

Documentation

You can find detailed documentation in the API reference.

Caching strategy

Fingerprint Pro usage is billed per API call. To reduce API calls, it is a good practice to cache identification results. The SDK uses SessionStorage to cache results by default.

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

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

Support and feedback

To ask questions or provide feedback, use Issues. If you need private support, please email us at oss-support@fingerprint.com. If you'd like to have a similar Vue wrapper for the open-source FingerprintJS, consider creating an issue in the main FingerprintJS repository.

Examples

You can find the following examples in the examples directory:

• SPA Application
• Nuxt Application