National Palace Museum

    @fingerprintjs/fingerprintjs-pro-vue-v2
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.2 • Public • Published

    FingerprintJS

    Build status Release status Current NPM version Monthly downloads from NPM MIT license Discord server

    FingerprintJS Pro Vue 2

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

    Installation

    To install the plugin run:

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

    Or:

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

    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.

    1. Register our plugin in your Vue application:
    import Vue from 'vue';
    import App from './App.vue';
    import { FpjsVueOptions, 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,
      },
    } as FpjsVueOptions);
    
    app.$mount('#app');
    1. 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 } from '@fingerprintjs/fingerprintjs-pro-vue-v2';
    import Vue from 'vue';
    
    Vue.use(fpjsPlugin, {
      loadOptions: {
        apiKey: process.env.API_KEY,
      },
    } 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 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:

    Install

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

    DownloadsWeekly Downloads

    18

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    30.2 kB

    Total Files

    5

    Last publish

    Collaborators

    • fp-pro
    • surgie