Skip to main content

Vue usage

Vue 3 integration for ThumbmarkJS - browser fingerprinting library.

Installation​

npm install @thumbmarkjs/thumbmarkjs @thumbmarkjs/vue

Usage​

1. Install the plugin​

import { createApp } from 'vue';
import { createThumbmarkPlugin } from '@thumbmarkjs/vue';

const app = createApp(App);
app.use(createThumbmarkPlugin());
app.mount('#app');

2. Use the composable​

<template>
  <div>
    <div v-if="isLoading">Loading...</div>
    <div v-else>
      <div>Visitor ID: {{ visitorId }}</div>
      <div>Thumbmark: {{ thumbmark }}</div>
    </div>
  </div>
</template>

<script setup>
import { useThumbmark } from '@thumbmarkjs/vue';

const { thumbmark, visitorId, isLoading } = useThumbmark();
</script>

With API Key​

app.use(createThumbmarkPlugin({
  apiKey: 'your-key'
}));

With Options​

app.use(createThumbmarkPlugin({
  apiKey: 'your-key',
  options: {
    timeout: 3000,
    exclude: ['webgl']
  }
}));

That's it! See also the configuration options.