Vue

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import { fpjsPlugin, FingerprintJSPro } from '@fingerprintjs/fingerprintjs-pro-vue-v3';

const app = createApp(App);

app
  .use(fpjsPlugin, {
    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,
      ],
      // region: "eu"
    },
  })
  .mount('#app');

<!-- src/App.vue -->
<script setup lang="js">
import { useVisitorData } from '@fingerprintjs/fingerprintjs-pro-vue-v3';

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

<template>
  <div>
    <button @click="getData({ ignoreCache: true })">Get visitor data</button>
    <p v-if="isLoading">Loading...</p>
    <p v-else>VisitorId: {{ data?.visitorId }}</p>
    <p v-if="error">{{ error.message }}</p>
    <pre v-if="data">{{ data }}</pre>
  </div>
</template>