Vue Router

Learn about Sentry's Vue Routing integration.

If you're using Vue Router, use our provided routing instrumentation to get better parameterized transaction names.

Our routing instrumentation supports vue-router v2, v3, and v4.

Here is a full example of how to use it:

main.js
Copied
import Vue from "vue";
import App from "./App";
import * as Sentry from "@sentry/vue";
import Router from "vue-router";
import HelloWorld from "@/components/HelloWorld";
import Foo from "@/components/Foo";
import Bar from "@/components/Bar";

Vue.use(Router);

const router = new Router({
  // your router configuration
});

Sentry.init({
  Vue,
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
  tracesSampleRate: 1.0,
  integrations: [Sentry.browserTracingIntegration({ router })],
});

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

You can pass an optional configuration object as a second argument to the browser tracing integration:

Copied
Sentry.browserTracingIntegration({
  router,
  routeLabel: "path",
});

The available options are:

KeyTypeDefaultDescription
routeLabelstringnameThe label to use for the route transactions. Can be either name or path. When this is name, the transaction will use route.name, if it is set, and else use the path of the route. By setting this to path you can opt-out of this and always use the path.
Previous
Pinia
Next
Multiple Vue Apps
Help improve this content
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) or suggesting an update ("yeah, this would be better").