Product
API
Demo
Sign In

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:

main.js
Copied
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 router = new Router({
  routes: [
    {
      path: "/",
      name: "HelloWorld",
      component: HelloWorld,
    },
    { path: "/foo/:id", component: Foo },
    { path: "/bar", component: Bar },
  ],
});

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

new Vue({
  el: "#app",
  router,
  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").
Suggest an edit to this page   |  Contribute to Docs   |  Report a problem
Package:
npm:@sentry/vue
Version:
7.34.0
Repository:
https://github.com/getsentry/sentry-javascript