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

inventarSarah · coolguyzone · chargome · web-flow · commit 852bacb87437 · 2025-07-02T14:44:00.000+02:00
## DESCRIBE YOUR PR This PR contains the updated Vue Quick Start guide. I added code snippets for Pluvia and late-defined Vue apps. We could put them in Expandables if it makes sense to you, but I don't think this is necessary since these sections are relatively short anyway. Closes: #14160 ## IS YOUR CHANGE URGENT? Help us prioritize incoming PRs by letting us know when the change needs to go live. - [ ] Urgent deadline (GA date, etc.):  - [ ] Other deadline:  - [x] None: Not urgent, can wait up to 1 week+ ## SLA - Teamwork makes the dream work, so please add a reviewer to your PRs. - Please give the docs team up to 1 week to review your PR unless you've added an urgent due date to it. Thanks in advance for your help! ## PRE-MERGE CHECKLIST *Make sure you've checked the following before merging your changes:* - [ ] Checked Vercel preview for correctness, including links - [ ] PR was reviewed and approved by any necessary SMEs (subject matter experts) - [ ] PR was reviewed and approved by a member of the [Sentry docs team](https://github.com/orgs/getsentry/teams/docs) ## EXTRA RESOURCES - [Sentry Docs contributor guide](https://docs.sentry.io/contributing/) --------- Co-authored-by: Alex Krawiec <alex.krawiec@sentry.io> Co-authored-by: Charly Gomez <charly.gomez@sentry.io>
diff --git a/docs/platforms/javascript/common/configuration/integrations/vue.mdx b/docs/platforms/javascript/common/configuration/integrations/vue.mdx
@@ -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>
 
@@ -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: "___PUBLIC_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 }));
-`
+```
diff --git a/docs/platforms/javascript/guides/vue/index.mdx b/docs/platforms/javascript/guides/vue/index.mdx
@@ -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
@@ -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
@@ -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`:
 
@@ -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 }),
@@ -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}
 // ...
@@ -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>
