Vue Router

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:

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";


const router = new Router({
  // your router configuration

  dsn: "",
  tracesSampleRate: 1.0,
  integrations: [
    new Sentry.BrowserTracing({
      routingInstrumentation: Sentry.vueRouterInstrumentation(router),

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


You can pass an optional configuration object as second argument to the router instrumentation:

vueRouterInstrumentation(vueRouter, {
  routeLabel: "path",

The available options are:

routeLabelstringnameThe label to use for the route transactions. Can be either name or path. When this is name, the transaction will use, 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.
Help improve this content
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) to suggesting an update ("yeah, this would be better").