diff --git a/src/platforms/javascript/guides/vue/configuration/integrations/vue-router.mdx b/src/platforms/javascript/guides/vue/configuration/integrations/vue-router.mdx index 1599e8b8ec06f..6cb77f2deb877 100644 --- a/src/platforms/javascript/guides/vue/configuration/integrations/vue-router.mdx +++ b/src/platforms/javascript/guides/vue/configuration/integrations/vue-router.mdx @@ -5,21 +5,24 @@ redirect_from: - /sdks/react/integrations/vue-router/ --- -If you are using Vue Router, you should use our provided integration to get better, parameterized transaction names. Here is a full example of how to use it: +If you're using Vue Router, you should use our provided routing instrumentation to get better, parameterized transaction names. -```javascript +Our routing instrumentation supports `vue-router` v2, v3, and v4. + +Here is a full example of how to use it: + +```javascript {filename:main.js} import Vue from "vue"; import App from "./App"; import * as Sentry from "@sentry/vue"; import { BrowserTracing } from "@sentry/tracing"; import Router from "vue-router"; import HelloWorld from "@/components/HelloWorld"; +import Foo from "@/components/Foo"; +import Bar from "@/components/Bar"; Vue.use(Router); -const Foo = { template: "
foo
" }; -const Bar = { template: "
bar
" }; - const router = new Router({ routes: [ { @@ -32,10 +35,8 @@ const router = new Router({ ], }); -Vue.config.productionTip = false; - Sentry.init({ - Vue: Vue, + Vue, dsn: "___PUBLIC_DSN___", tracesSampleRate: 1.0, integrations: [ @@ -43,10 +44,8 @@ Sentry.init({ routingInstrumentation: Sentry.vueRouterInstrumentation(router), }), ], - trackComponents: true, }); -/* eslint-disable no-new */ new Vue({ el: "#app", router, diff --git a/src/platforms/javascript/guides/vue/features/component-tracking.mdx b/src/platforms/javascript/guides/vue/features/component-tracking.mdx index 7dd8a92555f9c..1795daaa680b8 100644 --- a/src/platforms/javascript/guides/vue/features/component-tracking.mdx +++ b/src/platforms/javascript/guides/vue/features/component-tracking.mdx @@ -87,7 +87,7 @@ Sentry.init({ tracingOptions: { trackComponents: true; timeout: 500; - hooks: string['mount', 'update']; + hooks: ['mount', 'update']; } }) ```