Vue

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import { FingerprintPlugin } from '@fingerprint/vue';

const app = createApp(App);

app
  .use(FingerprintPlugin, {
    apiKey: 'PUBLIC_API_KEY',
    endpoints: 'https://metrics.yourwebsite.com',
    region: 'us',
  })
  .mount('#app');

<!-- src/App.vue -->
<script setup>
import { useVisitorData } from '@fingerprint/vue';

const { data, error, isLoading, getData } = useVisitorData({ immediate: true });
</script>

<template>
  <div>
    <button @click="getData()">Reload data</button>
    <p v-if="isLoading">Loading...</p>
    <p v-else>Visitor ID: {{ data?.visitor_id }}</p>
    <p v-if="error">{{ error.message }}</p>
    <pre v-if="data">{{ JSON.stringify(data, null, 2) }}</pre>
  </div>
</template>

import {
  fpjsPlugin,
  FingerprintJSPro,
  CacheLocation,
} from '@fingerprintjs/fingerprintjs-pro-vue-v3';
import { FingerprintPlugin } from '@fingerprint/vue';

app.use(fpjsPlugin, {
  cacheLocation: CacheLocation.LocalStorage,
  cacheTimeInSeconds: 60,
  loadOptions: {
    apiKey: 'PUBLIC_API_KEY',
    endpoint: ['https://metrics.yourwebsite.com', FingerprintJSPro.defaultEndpoint],
    scriptUrlPattern: [
      'https://metrics.yourwebsite.com/web/v<version>/<apiKey>/loader_v<loaderVersion>.js',
      FingerprintJSPro.defaultScriptUrlPattern,
    ],
  },
});
app.use(FingerprintPlugin, {
  cache: {
    storage: 'sessionStorage',
    duration: 3600,
  },
  apiKey: 'PUBLIC_API_KEY',
  endpoints: ['https://metrics.yourwebsite.com'],
});

import { useVisitorData } from '@fingerprintjs/fingerprintjs-pro-vue-v3';
import { useVisitorData } from '@fingerprint/vue'; 

const { data, isLoading, getData } = useVisitorData(
  { timeout: 1000, ignoreCache: true },
  { immediate: false },
);
// `immediate` can now be set in the first argument
// `ignoreCache` is no longer available; configure cache on the plugin instead
const { data, isLoading, getData } = useVisitorData({ timeout: 1000, immediate: false });

const { visitorId, requestId } = await getData();
console.log(visitorId, requestId);
const { visitor_id, event_id } = await getData();
console.log(visitor_id, event_id);