Vue Router Integration

If you're using Vue Router, you should 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 { BrowserTracing } from "@sentry/tracing";
import Router from "vue-router";
import HelloWorld from "@/components/HelloWorld";
import Foo from "@/components/Foo";
import Bar from "@/components/Bar";


const router = new Router({
  routes: [
      path: "/",
      name: "HelloWorld",
      component: HelloWorld,
    { path: "/foo/:id", component: Foo },
    { path: "/bar", component: Bar },

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

new Vue({
  el: "#app",
  components: { App },
  template: "<App/>",
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").