Skip to content

docs(js): Create Vue Quick Start guide #14162

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

docs(js): Create Vue Quick Start guide #14162

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
da5f233
create Vue quick start guide
inventarSarah Jun 26, 2025
605c476
Apply suggestions from code review
inventarSarah Jun 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 7 additions & 6 deletions docs/platforms/javascript/common/configuration/integrations/vue.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ supported:

<Alert>

This integration is enabled by default (recommended) but can also be added manually.
This integration is enabled by default (recommended) but can also be added manually.

</Alert>

Expand All @@ -23,18 +23,19 @@ If the Vue application is not defined from the start, you can add error monitori
To manually add the integration for late-defined Vue applications:

```javascript {filename:main.js}
import * as Sentry from '@sentry/vue';
import * as Sentry from "@sentry/vue";

Sentry.init({
dsn: '...',
dsn: "...",
// Filter out default `Vue` integration
integrations: integrations => integrations.filter(integration => integration.name !== 'Vue'),
integrations: (integrations) =>
integrations.filter((integration) => integration.name !== "Vue"),
});

// Sometimes later
const app = createApp({
template: '<div>hello</div>',
template: "<div>hello</div>",
});

Sentry.addIntegration(Sentry.vueIntegration({ app }));
`
```
148 changes: 124 additions & 24 deletions docs/platforms/javascript/guides/vue/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
---
title: Vue
description: "Learn how to manually set up Sentry in your Vue app and capture your first errors."
sdk: sentry.javascript.vue
categories:
- javascript
Expand All @@ -8,17 +9,25 @@ categories:

<PlatformContent includePath="getting-started-prerequisites" />

## Features
## Step 1: Install

In addition to capturing errors, you can monitor interactions between multiple services or applications by [enabling tracing](/concepts/key-terms/tracing/). You can also get to the root of an error or performance issue faster, by watching a video-like reproduction of a user session with [session replay](/product/explore/session-replay/web/getting-started/).
Choose the features you want to configure, and this guide will show you how:

Select which Sentry features you'd like to install in addition to Error Monitoring to get the corresponding installation and configuration instructions below.
<OnboardingOptionButtons
options={[
"error-monitoring",
"performance",
"session-replay",
"user-feedback",
"logs",
]}
/>

## Install
<PlatformContent includePath="getting-started-features-expandable" />

<OnboardingOptionButtons options={["error-monitoring", "performance", "session-replay", "user-feedback", "logs"]} />
### Install the Sentry SDK

Sentry captures data by using an SDK within your application's runtime.
Run the command for your preferred package manager to add the Sentry SDK to your application:

```bash {tabTitle:npm}
npm install @sentry/vue --save
Expand All @@ -32,9 +41,7 @@ yarn add @sentry/vue
pnpm add @sentry/vue
```

## Configure

Configuration should happen as early as possible in your application's lifecycle.
## Step 2: Configure

To initialize Sentry in your Vue application, add the following code snippet to your `main.js`:

Expand All @@ -53,11 +60,11 @@ const router = createRouter({
Sentry.init({
app,
dsn: "___PUBLIC_DSN___",

// Adds request headers and IP for users, for more info visit:
// https://docs.sentry.io/platforms/javascript/guides/vue/configuration/options/#sendDefaultPii
sendDefaultPii: true,

integrations: [
// ___PRODUCT_OPTION_START___ performance
Sentry.browserTracingIntegration({ router }),
Expand Down Expand Up @@ -168,24 +175,65 @@ new Vue({
}).$mount("#app");
```

<Alert type="info">

If you're creating more than one Vue 3 app within your application, check out how to initialize the SDK for [multiple apps](./features/multiple-apps).

### Late-Defined Vue Apps
</Alert>

### Configuration for Late-Defined Vue Apps

If your Vue application is not defined from the start, you can add error monitoring for Vue-specific errors later on.
To manually add the integration for late-defined Vue applications, update your `main.js` file:

If the Vue application is not defined from the start, you can add error monitoring for Vue-specific errors later on.
To manually add the integration for late-defined Vue applications check out the docs for the <PlatformLink to="/configuration/integrations/vue/">Vue Integration</PlatformLink>.
```javascript {filename:main.js}
import * as Sentry from "@sentry/vue";

### Pinia Plugin
Sentry.init({
dsn: "...",
// Filter out default `Vue` integration
integrations: (integrations) =>
integrations.filter((integration) => integration.name !== "Vue"),
});

Sentry Vue SDK provides a Pinia plugin to capture Pinia action and state data. Learn more about the [Pinia Plugin](./features/pinia) and its options.
// Sometimes later
const app = createApp({
template: "<div>hello</div>",
});

Sentry.addIntegration(Sentry.vueIntegration({ app }));
```

<PlatformContent includePath="getting-started-sourcemaps" />
### Configuration for Pinia

## Verify
To capture Pinia state data, use `Sentry.createSentryPiniaPlugin()` and add it to your Pinia store instance:

This snippet includes an intentional error, so you can test that everything is working as soon as you set it up.
```javascript
import { createPinia } from "pinia";
import { createSentryPiniaPlugin } from "@sentry/vue";

Add a button to your page that throws an error:
const pinia = createPinia();

pinia.use(createSentryPiniaPlugin());
```

Learn more about the [Pinia Plugin](./features/pinia) and its options.

## Step 3: Add Readable Stack Traces With Source Maps (Optional)

<PlatformContent includePath="getting-started-sourcemaps-short-version" />

## Step 4: Avoid Ad Blockers With Tunneling (Optional)

<PlatformContent includePath="getting-started-tunneling" />

## Step 5: Verify Your Setup

Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project.

### Issues

To verify that Sentry is capturing errors and creating issues in your Sentry project, add the following test button to one of your pages, which will trigger an error that Sentry will capture when you click it:

```javascript {filename:App.vue}
// ...
Expand All @@ -202,10 +250,62 @@ export default {
};
```

<Alert>
<OnboardingOption optionId="performance" hideForThisOption>
Open the page in a browser and click the button to trigger a frontend error.
</OnboardingOption>

Learn more about manually capturing an error or message in our <PlatformLink to="/usage/">Usage documentation</PlatformLink>.
<PlatformContent includePath="getting-started-browser-sandbox-warning" />

</Alert>
<OnboardingOption optionId="performance">
### Tracing

To test your tracing configuration, update the previous code snippet to start a performance trace to measure the time it takes for your code to execute:

```javascript {filename:App.vue}
// ...
<button @click="throwError">Throw error</button>
// ...

export default {
// ...
methods: {
throwError() {
Sentry.startSpan({ op: "test", name: "Example Frontend Span" }, async () => {
// Simulate an asynchronous operation
await new Promise(resolve => setTimeout(resolve, 99));

throw new Error("Sentry Error");
});
}
}
};

```

Open the page in a browser and click the button to trigger a frontend error and performance trace.

</OnboardingOption>

### View Captured Data in Sentry

Now, head over to your project on [Sentry.io](https://sentry.io/) to view the collected data (it takes a couple of moments for the data to appear).

<PlatformContent includePath="getting-started-verify-locate-data" />

## Next Steps

At this point, you should have integrated Sentry into your Vue application and should already be sending data to your Sentry project.

Now's a good time to customize your setup and look into more advanced topics. Our next recommended steps for you are:

- Extend Sentry to your backend using one of our [SDKs](/)
- Continue to <PlatformLink to="/configuration">customize your configuration</PlatformLink>
- Make use of <PlatformLink to="/features">Vue-specific features</PlatformLink>
- Learn how to <PlatformLink to="/usage">manually capture errors</PlatformLink>

<Expandable permalink={false} title="Are you having problems setting up the SDK?">

- Find various topics in <PlatformLink to="/troubleshooting">Troubleshooting</PlatformLink>
- [Get support](https://sentry.zendesk.com/hc/en-us/)

To view and resolve the recorded error, log into [sentry.io](https://sentry.io) and select your project. Clicking on the error's title will open a page where you can see detailed information and mark it as resolved.
</Expandable>