\n\n# Official Sentry SDK for Vue.js\n\n## Links\n\n- [Official SDK Docs](https://docs.sentry.io/platforms/javascript/guides/vue/)\n\n## General\n\nThis package is a wrapper around `@sentry/browser`, with added functionality related to Vue.js. All methods available in\n`@sentry/browser` can be imported from `@sentry/vue`.\n\nTo use this SDK, call `Sentry.init(options)` as early in your application as possible.\n\n### Vue 3\n\n```javascript\nconst app = createApp({\n // ...\n});\n\nSentry.init({\n app,\n dsn: '__PUBLIC_DSN__',\n integrations: [\n // Or omit `router` if you're not using vue-router\n Sentry.browserTracingIntegration({ router }),\n ],\n});\n```\n\n### Vue 2\n\n```javascript\nimport Vue from 'vue';\nimport App from './App';\nimport router from './router';\nimport * as Sentry from '@sentry/vue';\n\nSentry.init({\n Vue: Vue,\n dsn: '__PUBLIC_DSN__',\n integrations: [\n // Or omit `router` if you're not using vue-router\n Sentry.browserTracingIntegration({ router }),\n ],\n});\n\nnew Vue({\n el: '#app',\n router,\n components: { App },\n template: '',\n});\n```\n\n### TanStack Router\n\nIf you use TanStack Router for Vue instead of Vue Router, you can use the TanStack Router instrumentation to create\nnavigation spans and collect meaningful performance data about the health of your page loads and associated requests.\n\nAdd `tanstackRouterBrowserTracingIntegration` from `@sentry/vue/tanstackrouter` instead of the regular\n`Sentry.browserTracingIntegration`.\n\nMake sure `tanstackRouterBrowserTracingIntegration` is initialized by your `Sentry.init` call. Otherwise, the routing\ninstrumentation will not work properly.\n\nPass your router instance from `createRouter` to the integration.\n\n```javascript\nimport { createApp } from 'vue';\nimport { createRouter } from '@tanstack/vue-router';\nimport * as Sentry from '@sentry/vue';\nimport { tanstackRouterBrowserTracingIntegration } from '@sentry/vue/tanstackrouter';\n\nconst router = createRouter({\n // your router config\n // ...\n});\n\nSentry.init({\n app,\n dsn: '__PUBLIC_DSN__',\n integrations: [tanstackRouterBrowserTracingIntegration(router)],\n tracesSampleRate: 1.0, // Capture 100% of the transactions\n});\n```","users":{}}
![\"Sentry\"](\"https://sentry-brand.storage.googleapis.com/sentry-wordmark-dark-280x84.png\")
\n \n