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 v-if="isLoading">Loading...</div>
  <div v-else-if="error">Error: {{ error.message }}</div>
  <div v-else>
    <div>Visitor ID: {{ visitorId }}</div>
    <div>Thumbmark: {{ thumbmark }}</div>
    <button @click="reload">Reload</button>
  </div>
</template>

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

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

With API Key

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

With Options

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

API

createThumbmarkPlugin(options?)

Option	Type	Description
apiKey	string	Optional API key for the hosted ThumbmarkJS API
options	ThumbmarkOptions	Optional configuration options passed to the underlying Thumbmark instance

useThumbmark()

Returns reactive refs:

Field	Type	Description
thumbmark	Ref<string | null>	The generated thumbmark hash
visitorId	Ref<string | null>	The visitor ID (when API is used)
components	Ref<Record<string, any> | null>	Raw fingerprint components
info	Ref<Record<string, any> | null>	Additional info returned by the API
isLoading	Ref<boolean>	Loading state
error	Ref<Error | null>	Error state
reload	() => Promise<void>	Re-generate the thumbmark

The composable is SSR-safe — it only runs on the client.

See also the configuration options.