@fingerprintjs/fingerprintjs-pro-vue-v2
v1.3.0Fingerprint Pro Vue 2 SDK
Fingerprint is a device intelligence platform offering 99.5% accurate visitor identification.
Fingerprint Pro Vue SDK is an easy way to integrate Fingerprint Pro into your Vue 2 application. It supports all capabilities of the Fingerprint JavaScript agent and provides a built-in caching mechanism.
Requirements
- For Typescript users: Typescript 4.5 or higher
- Vue 2.6 or higher
- For Nuxt users: Nuxt 2.16 or higher
This package works with Fingerprint Pro, it is not compatible with source-available FingerprintJS. See our documentation to learn more about the difference between Fingerprint Pro and the source-available FingerprintJS.
Installation
To install the plugin run:
yarn add @fingerprintjs/fingerprintjs-pro-vue-v2
Or:
npm install @fingerprintjs/fingerprintjs-pro-vue-v2
Or:
pnpm add @fingerprintjs/fingerprintjs-pro-vue-v2
Getting started
To identify visitors, you'll need a Fingerprint Pro account (you can sign up for free). Get your API key and get started with the Fingerprint Pro documentation.
- Register the plugin in your Vue application. Set a region if you have chosen a non-global region during registration. Set
endpoint
andscriptUrlPattern
if you are using one of our proxy integrations to increase the accuracy and effectiveness of visitor identification.
import Vue from 'vue';
import App from './App.vue';
import {
fpjsPlugin,
FpjsVueOptions,
// defaultEndpoint,
// defaultScriptUrlPattern,
} from '@fingerprintjs/fingerprintjs-pro-vue-v2';
const app = new Vue(App);
Vue.use(fpjsPlugin, {
loadOptions: {
apiKey: '<your-public-api-key>',
// region: 'eu',
// endpoint: ['metrics.yourwebsite.com', defaultEndpoint],
// scriptUrlPattern: ['metrics.yourwebsite.com/agent-path', defaultScriptUrlPattern],
},
} as FpjsVueOptions);
app.$mount('#app');
- You can now access
$fpjs
inside your components:
<script lang='ts'>
import Vue from 'vue';
export default Vue.extend({
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 Vue from 'vue';
import { fpjsGetVisitorDataExtendedMixin } from '@fingerprintjs/fingerprintjs-pro-vue-v2';
export default Vue.extend({
// 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 Vue from 'vue';
import { fpjsGetVisitorDataMixin } from '@fingerprintjs/fingerprintjs-pro-vue-v2';
export default Vue.extend({
// 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 {
fpjsPlugin,
FpjsVueOptions,
// defaultEndpoint,
// defaultScriptUrlPattern,
} from '@fingerprintjs/fingerprintjs-pro-vue-v2';
import Vue from 'vue';
Vue.use(fpjsPlugin, {
loadOptions: {
apiKey: process.env.API_KEY,
// region: 'eu',
// endpoint: ['metrics.yourwebsite.com', defaultEndpoint],
// scriptUrlPattern: ['metrics.yourwebsite.com/agent-path', defaultScriptUrlPattern],
},
} as FpjsVueOptions);
//nuxt.config.js
import path from 'path';
export default {
// Load our plugin, ".client" suffix ensures that it is only loaded on client side.
plugins: ['~/plugins/fingerprintjs.client.ts'],
// Other configurations...
};
You can also check the example Nuxt Application.
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: 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 getVisitorData
or getVisitorDataExtended
functions.
Support and feedback
To ask questions or provide feedback, use Issues. If you need private support, please email us at [email protected]
. 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:
License
This project is licensed under the MIT license.
Metadata
- MIT
- Whatever
- FingerprintJS, Inc
- released 10/11/2023