Notwithstanding Precautions, Misadventure

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

    1.1.0 • Public • Published

    Fingerprint logo

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

    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-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). 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@fingerprint.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-v3

    DownloadsWeekly Downloads

    5

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    38.2 kB

    Total Files

    5

    Last publish

    Collaborators

    • fp-pro
    • surgie