# @sentry/vue

> Official Sentry SDK for Vue.js

Latest version **10.75.0** (published 2026-09-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install @sentry/vue
pnpm add @sentry/vue
yarn add @sentry/vue
bun add @sentry/vue
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 10.75.0 |
| Published | 2026-09-16 |
| First published | 2020-12-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=18 |
| Dependencies | 3 |
| Unpacked size | 200.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 8742 |
| Author | Sentry |
| Maintainers | sentry-bot |

## Links

- npm: https://www.npmjs.com/package/@sentry/vue
- Repository: https://github.com/getsentry/sentry-javascript
- Homepage: https://github.com/getsentry/sentry-javascript/tree/master/packages/vue
- Issues: https://github.com/getsentry/sentry-javascript/issues
- npm.io page: https://npm.io/package/@sentry/vue

## Dependencies (3)

- [@sentry/core](https://npm.io/package/@sentry/core.md) 10.75.0
- [@sentry/browser](https://npm.io/package/@sentry/browser.md) 10.75.0
- [@sentry/conventions](https://npm.io/package/@sentry/conventions.md) ^0.16.0

## Recent versions

- 10.75.0 (latest) — 2026-09-16
- 11.0.0-rc.0 (next) — 2026-09-16
- 8.55.2 (v8) — 2026-04-28
- 9.47.1 (v9) — 2025-11-17
- 7.120.4 (v7) — 2025-07-29
- 10.74.0 — 2026-09-09
- 11.0.0-beta.2 — 2026-09-09
- 11.0.0-beta.1 — 2026-09-03
- 11.0.0-beta.0 — 2026-09-02
- 10.73.0 — 2026-08-31
- 11.0.0-alpha.2 — 2026-08-28
- 10.72.0 — 2026-08-28
- 10.71.0 — 2026-08-24
- 11.0.0-alpha.1 — 2026-08-12
- 10.70.0 — 2026-08-10
- … 536 more at https://npm.io/package/@sentry/vue/versions

## README

<p align="center">
  <a href="https://sentry.io/?utm_source=github&utm_medium=logo" target="_blank">
    <img src="https://sentry-brand.storage.googleapis.com/sentry-wordmark-dark-280x84.png" alt="Sentry" width="280" height="84">
  </a>
</p>

# Official Sentry SDK for Vue.js

## Links

- [Official SDK Docs](https://docs.sentry.io/platforms/javascript/guides/vue/)

## General

This package is a wrapper around `@sentry/browser`, with added functionality related to Vue.js. All methods available in
`@sentry/browser` can be imported from `@sentry/vue`.

To use this SDK, call `Sentry.init(options)` as early in your application as possible.

### Vue 3

```javascript
const app = createApp({
  // ...
});

Sentry.init({
  app,
  dsn: '__PUBLIC_DSN__',
  integrations: [
    // Or omit `router` if you're not using vue-router
    Sentry.browserTracingIntegration({ router }),
  ],
});
```

### Vue 2

```javascript
import Vue from 'vue';
import App from './App';
import router from './router';
import * as Sentry from '@sentry/vue';

Sentry.init({
  Vue: Vue,
  dsn: '__PUBLIC_DSN__',
  integrations: [
    // Or omit `router` if you're not using vue-router
    Sentry.browserTracingIntegration({ router }),
  ],
});

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
});
```

### TanStack Router

If you use TanStack Router for Vue instead of Vue Router, you can use the TanStack Router instrumentation to create
navigation spans and collect meaningful performance data about the health of your page loads and associated requests.

Add `tanstackRouterBrowserTracingIntegration` from `@sentry/vue/tanstackrouter` instead of the regular
`Sentry.browserTracingIntegration`.

Make sure `tanstackRouterBrowserTracingIntegration` is initialized by your `Sentry.init` call. Otherwise, the routing
instrumentation will not work properly.

Pass your router instance from `createRouter` to the integration.

```javascript
import { createApp } from 'vue';
import { createRouter } from '@tanstack/vue-router';
import * as Sentry from '@sentry/vue';
import { tanstackRouterBrowserTracingIntegration } from '@sentry/vue/tanstackrouter';

const router = createRouter({
  // your router config
  // ...
});

Sentry.init({
  app,
  dsn: '__PUBLIC_DSN__',
  integrations: [tanstackRouterBrowserTracingIntegration(router)],
  tracesSampleRate: 1.0, // Capture 100% of the transactions
});
```

---
_Source: https://npm.io/package/@sentry/vue · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._