{"id":48939477,"url":"https://github.com/fingerprintjs/vue","last_synced_at":"2026-04-17T13:08:59.908Z","repository":{"id":36968422,"uuid":"494053946","full_name":"fingerprintjs/vue","owner":"fingerprintjs","description":"Fingerprint Pro Plugin for Vue","archived":false,"fork":false,"pushed_at":"2026-04-15T11:47:00.000Z","size":2387,"stargazers_count":18,"open_issues_count":6,"forks_count":5,"subscribers_count":8,"default_branch":"main","last_synced_at":"2026-04-15T13:23:32.251Z","etag":null,"topics":["fingerprinting","fraud-detection","vue","vue2","vue3"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fingerprintjs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2022-05-19T12:03:41.000Z","updated_at":"2026-04-15T10:33:04.000Z","dependencies_parsed_at":"2024-03-27T12:32:34.393Z","dependency_job_id":"511eb822-42b2-47a8-98c1-adb95b76ca46","html_url":"https://github.com/fingerprintjs/vue","commit_stats":{"total_commits":191,"total_committers":6,"mean_commits":"31.833333333333332","dds":"0.32460732984293195","last_synced_commit":"e16ec95d9524b33b7449c8366ad03e4799131c07"},"previous_names":["fingerprintjs/vue"],"tags_count":30,"template":false,"template_full_name":"fingerprintjs/library-template-typescript","purl":"pkg:github/fingerprintjs/vue","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fingerprintjs%2Fvue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fingerprintjs%2Fvue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fingerprintjs%2Fvue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fingerprintjs%2Fvue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fingerprintjs","download_url":"https://codeload.github.com/fingerprintjs/vue/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fingerprintjs%2Fvue/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31930173,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-17T12:37:54.787Z","status":"ssl_error","status_checked_at":"2026-04-17T12:37:25.095Z","response_time":62,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["fingerprinting","fraud-detection","vue","vue2","vue3"],"created_at":"2026-04-17T13:08:59.187Z","updated_at":"2026-04-17T13:08:59.899Z","avatar_url":"https://github.com/fingerprintjs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://fingerprint.com\"\u003e\n    \u003cpicture\u003e\n     \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://fingerprintjs.github.io/home/resources/logo_light.svg\" /\u003e\n     \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://fingerprintjs.github.io/home/resources/logo_dark.svg\" /\u003e\n     \u003cimg src=\"https://fingerprintjs.github.io/home/resources/logo_dark.svg\" alt=\"Fingerprint logo\" width=\"312px\" /\u003e\n   \u003c/picture\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n   \u003ca href=\"https://github.com/fingerprintjs/vue/actions/workflows/ci.yml\"\u003e\u003cimg src=\"https://github.com/fingerprintjs/vue/actions/workflows/ci.yml/badge.svg\" alt=\"Build status\"\u003e\u003c/a\u003e\n   \u003ca href=\"https://github.com/fingerprintjs/vue/actions/workflows/release.yml\"\u003e\u003cimg src=\"https://github.com/fingerprintjs/vue/actions/workflows/release.yml/badge.svg\" alt=\"Release status\"\u003e\u003c/a\u003e\n   \u003ca href=\"https://www.npmjs.com/package/@fingerprint/vue\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/@fingerprint/vue.svg\" alt=\"Current NPM version\"\u003e\u003c/a\u003e\n   \u003ca href=\"https://www.npmjs.com/package/@fingerprint/vue\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/@fingerprint/vue.svg\" alt=\"Monthly downloads from NPM\"\u003e\u003c/a\u003e\n   \u003ca href=\"https://opensource.org/licenses/MIT\"\u003e\u003cimg src=\"https://img.shields.io/:license-mit-blue.svg\" alt=\"MIT license\"\u003e\u003c/a\u003e\n   \u003ca href=\"https://discord.gg/39EpE2neBg\"\u003e\u003cimg src=\"https://img.shields.io/discord/852099967190433792?style=logo\u0026label=Discord\u0026logo=Discord\u0026logoColor=white\" alt=\"Discord server\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n# Fingerprint Vue 3 SDK\n\n[Fingerprint](https://fingerprint.com/) is a device intelligence platform offering industry-leading accuracy.\n\nFingerprint Vue SDK is an easy way to integrate [Fingerprint](https://fingerprint.com/) into your Vue 3 application. It supports all capabilities of the Fingerprint JavaScript agent.\n\n## Requirements\n\n- For Typescript users: Typescript 4.5 or higher\n- Vue 3.1 or higher\n- For Nuxt users: Nuxt 3.0 or higher\n\nThis package works with the commercial [Fingerprint platform](https://fingerprint.com/). It is not compatible with the source-available [FingerprintJS library](https://github.com/fingerprintjs/fingerprintjs). Learn more about the [differences between Fingerprint and FingerprintJS](https://fingerprint.com/github/).\n\n## Installation\n\nTo install the plugin run:\n\n```shell\nyarn add @fingerprint/vue\n```\n\nOr:\n\n```shell\nnpm install @fingerprint/vue\n```\n\n```shell\npnpm add @fingerprint/vue\n```\n\n## Getting started\n\nTo identify visitors, you'll need a Fingerprint account (you\ncan [sign up for free](https://dashboard.fingerprint.com/signup/)).\nGet your API key and get started with the [Fingerprint documentation](https://docs.fingerprint.com/docs/quick-start-guide).\n\nRegister the plugin in your Vue application.\n\n* Set a [region](https://docs.fingerprint.com/docs/regions) if you have chosen a non-global region during registration.\n* Set `endpoints` if you are using one of our proxy integrations to [increase the accuracy and effectiveness](https://docs.fingerprint.com/docs/protecting-the-javascript-agent-from-adblockers) of visitor identification.\n\n```typescript\nimport { createApp } from 'vue';\nimport App from './App.vue';\nimport { FingerprintPlugin } from '@fingerprint/vue';\n\nconst app = createApp(App);\n\napp\n  .use(FingerprintPlugin, {\n    apiKey: '\u003cyour-public-api-key\u003e',\n    endpoints: \"https://metrics.yourwebsite.com\",\n    region: 'eu',\n  })\n  .mount('#app');\n```\n\nYou can use the plugin with Composition API, Options API, or Mixins, with or without Nuxt. See the usage examples below.\n\n## Composition API\n\nThe plugin provides a `useVisitorData` composable you can use to identify visitors:\n\n```vue\n\u003cscript setup\u003e\nimport { useVisitorData } from '@fingerprint/vue';\nimport { watch } from 'vue';\n\nconst { data, error, isLoading, isFetched, getData } = useVisitorData(\n  // Set to false to prevent fetching data on mount\n  { immediate: false }\n);\n\nwatch(data, (currentData) =\u003e {\n  if (currentData) {\n    // Do something with the data\n    console.log(currentData.visitor_id);\n  }\n});\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cbutton @click='getData()'\u003eGet visitor data\u003c/button\u003e\n\u003c/template\u003e\n```\n\nThe `getData()` function throws on error. You can catch errors using try/catch or check the `error` ref:\n\n```vue\n\u003cscript setup\u003e\nimport { useVisitorData } from '@fingerprint/vue';\n\nconst { data, error, isLoading, isFetched, getData } = useVisitorData();\n\nasync function handleClick() {\n  try {\n    const result = await getData();\n    console.log(result.visitor_id);\n  } catch (err) {\n    console.error('Identification failed:', err);\n  }\n}\n\u003c/script\u003e\n```\n\n## Options API\n\nThe plugin injects a `$fingerprint` object into your components that you can use to identify visitors:\n\n```vue\n\u003cscript lang='ts'\u003e\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n  methods: {\n    async getVisitorData() {\n      const result = await this.$fingerprint.getVisitorData();\n      // Do something with result\n      console.log(result.visitor_id);\n    }\n  }\n});\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cbutton @click='getVisitorData'\u003eGet visitor data\u003c/button\u003e\n\u003c/template\u003e\n```\n\n### Mixins\n\nFor convenience, we also provide a mixin that handles all query states:\n\n```vue\n\u003cscript lang='ts'\u003e\nimport { defineComponent } from 'vue';\nimport { fingerprintGetVisitorDataMixin } from '@fingerprint/vue';\n\nexport default defineComponent({\n  mixins: [fingerprintGetVisitorDataMixin],\n  async mounted() {\n    // You can also fetch data on mount\n    // await this.$getVisitorData();\n  }\n});\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cbutton @click='$getVisitorData'\u003e\n      Get visitor data\n    \u003c/button\u003e\n    \u003cspan v-if='visitorData.isLoading'\u003e\n      Loading...\n    \u003c/span\u003e\n    \u003cspan v-else-if='visitorData.error'\u003e\n      Error: {{ visitorData.error }}\n    \u003c/span\u003e\n    \u003cspan v-else-if='visitorData.isFetched'\u003e\n      Visitor ID: {{ visitorData.data.visitor_id }}\n    \u003c/span\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n## Nuxt\n\nThe plugin works with Nuxt out of the box, however, you need to register it on the client side only.\n\n```typescript\n// plugins/fingerprint.client.ts\nimport { defineNuxtPlugin, useRuntimeConfig } from '#app';\nimport { FingerprintPlugin } from '@fingerprint/vue';\n\nexport default defineNuxtPlugin((nuxtApp) =\u003e {\n  const config = useRuntimeConfig();\n\n  nuxtApp.vueApp.use(FingerprintPlugin, {\n    apiKey: config.public.API_KEY,\n    endpoints: \"https://metrics.yourwebsite.com\",\n    region: 'eu',\n  });\n});\n```\n\n```typescript\n// nuxt.config.ts\nimport { defineNuxtConfig } from 'nuxt';\n\nexport default defineNuxtConfig({\n  runtimeConfig: {\n    public: {\n      // Inject Fingerprint API key\n      API_KEY: process.env.API_KEY,\n    },\n  }\n});\n```\n\nSee the [example Nuxt Application](examples/nuxt-v3-example) for more details.\n\n## Linking and tagging information\n\nThe `visitor_id` provided by Fingerprint Identification is especially useful when combined with information you already know about your users, for example, account IDs, order IDs, etc. To learn more about various applications of the `linkedId` and `tag`, see [Linking and tagging information](https://docs.fingerprint.com/docs/tagging-information).\n\nAssociate your data with a visitor ID using the `linkedId` or `tag` parameter of the `useVisitorData()` composable or the `getData()` function:\n\n```vue\n\u003cscript setup\u003e\nimport { useVisitorData } from '@fingerprint/vue';\n\nconst { data, error, isLoading, getData } = useVisitorData({\n  linkedId: 'user_1234',\n  tag: {\n    userAction: 'login',\n    analyticsId: 'UA-5555-1111-1',\n  },\n})\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n\u003c!--...--\u003e\n\u003c/template\u003e\n```\n\n## Direct agent access\n\nFor advanced use cases, you can access the full `@fingerprint/agent` API using the `Fingerprint` namespace export:\n\n```typescript\nimport { Fingerprint } from '@fingerprint/vue';\n\n// Use agent types\ntype Result = Fingerprint.GetResult;\ntype Options = Fingerprint.GetOptions;\n\n// Or call start() directly\nconst agent = Fingerprint.start({ apiKey: '...' });\nconst result = await agent.get();\n```\n\n## Caching\n\nFingerprint usage is billed per API call. To avoid unnecessary API calls, it is a good practice to [cache identification results](https://docs.fingerprint.com/docs/caching-visitor-information).\n\nCaching is off by default. You can configure caching using plugin [options](https://docs.fingerprint.com/reference/js-agent-v4-start-function#cacheconfig):\n\n```typescript\napp.use(FingerprintPlugin, {\n  apiKey: '\u003cyour-public-api-key\u003e',\n  cache: {\n    storage: 'sessionStorage', // or 'localStorage' or 'agent'\n    duration: 'optimize-cost', // or 'aggressive' or a number in seconds\n  },\n});\n```\n\n## Migration from v1.x\n\nVersion 2.0 upgrades the underlying Fingerprint agent from v3 to v4 and introduces several breaking changes. See the [migration guide](docs/migration-v1-to-v2.md) for detailed instructions and the [JavaScript agent v3 to v4 migration guide](https://docs.fingerprint.com/docs/migrating-from-v3-to-v4) for underlying agent changes.\n\n## Documentation\n\nYou can find detailed documentation in the [API reference](https://fingerprintjs.github.io/vue).\n\n## Support and feedback\n\nTo ask questions or provide feedback, use [Issues](https://github.com/fingerprintjs/vue/issues). If you need private support, please email us at `oss-support@fingerprint.com`. If you'd like to have a similar Vue wrapper for the [source-available FingerprintJS](https://github.com/fingerprintjs/fingerprintjs), consider creating an issue in the main [FingerprintJS repository](https://github.com/fingerprintjs/fingerprintjs/issues).\n\n## Examples\n\nYou can find the following examples in the [examples](examples) directory:\n\n- [SPA Application](examples/spa-v3-example)\n- [Nuxt Application](examples/nuxt-v3-example)\n\n## License\n\nThis project is licensed under the [MIT license](https://github.com/fingerprintjs/vue/blob/main/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffingerprintjs%2Fvue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffingerprintjs%2Fvue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffingerprintjs%2Fvue/lists"}