{"id":15297,"plugin_id":"plugin_asdk_app_69d3e530928c819191a9738ef3f4def6","kind":"skill","collection_source":null,"comparison_source":null,"observed_at":"2026-09-30T23:11:08.858Z","digest":"ab307ca70b39a75575e968f471812cff0c3f513d318445ce17f55d99cba35326","against":null,"payload":{"description":"Integrate Fingerprint device identification into a Vue 3 (or Nuxt) app — initialize the agent and get the visitor's visitor_id and event_id.","included_files":[{"relative_path":"skill.json","size_in_bytes":214},{"relative_path":"snippets/plugin.js","size_in_bytes":510},{"relative_path":"snippets/use-visitor-data.vue","size_in_bytes":648}],"name":"fingerprint-vue","skill_md_contents":"---\nname: fingerprint-vue\ndescription: Integrate Fingerprint device identification into a Vue 3 (or Nuxt) app — initialize the agent and get the visitor's visitor_id and event_id.\n---\n\n# Fingerprint — Vue\n\nIntegrate Fingerprint into a Vue 3 app to identify visitors: register the plugin once at startup,\nthen ask it for the visitor's `visitor_id` and a single-use `event_id` wherever you need it (on\nmount, or on an action like login or checkout).\n\n> Docs: https://docs.fingerprint.com/docs/vuejs · JS Agent v4: https://docs.fingerprint.com/reference/js-agent-v4\n\n## Package\n`@fingerprint/vue` — install the latest version. (Nuxt uses the same package, registered\nclient-side. For plain HTML or an unsupported framework, use `@fingerprint/agent` instead.)\n\n## Env var\n- `FINGERPRINT_PUBLIC_API_KEY` — the public key, safe to ship to the browser.\n\n> Bundlers only expose prefixed vars to client code — map the key to the bundler's convention:\n> - Vite: `VITE_FINGERPRINT_PUBLIC_API_KEY` → `import.meta.env.VITE_...`\n> - Vue CLI: `VUE_APP_FINGERPRINT_PUBLIC_API_KEY` → `process.env.VUE_APP_...`\n> Never expose `FINGERPRINT_SECRET_API_KEY` to the frontend.\n\n## Steps\n\n1. **Install** `@fingerprint/vue`.\n\n2. **Initialize once at the app root.** Register `FingerprintPlugin` with `app.use(...)`, passing\n   the public key and region (`us` | `eu` | `ap`, matching the workspace). See `snippets/plugin.js`.\n\n3. **Get the identification where you need it.** Use the `useVisitorData` composable. For\n   identify-on-demand pass `{ immediate: false }` and call `getData()` on the action you care\n   about; it returns `{ visitor_id, event_id, ... }`. See `snippets/use-visitor-data.vue`.\n\n4. **Verify it works.** Disable your ad blocker, run the dev server, trigger the call, and confirm\n   a `visitor_id` is logged in the browser console (or that the event appears on the dashboard\n   Events page).\n\n## Notes\n- Region must match the workspace (`us` | `eu` | `ap`).\n- Register the plugin once at the app root; don't re-instantiate per component. Don't block the UI\n  on identification — handle the composable's `isLoading` / `error` state.\n- **Production:** protect the agent from ad blockers with a custom subdomain or proxy —\n  https://docs.fingerprint.com/docs/protecting-the-javascript-agent-from-adblockers.\n- Don't use legacy `@fingerprintjs/fingerprintjs-pro`, `FingerprintJS.load()`, or `scriptUrlPattern`.\n"},"changes":[],"summary":"First saved snapshot. No earlier version is available for comparison.","summary_kind":"deterministic","summary_metadata":{}}