@appsignal/vue

Installation

Add the @appsignal/vue and @appsignal/javascript packages to your package.json. Then, run npm install/yarn install.

You can also add these packages to your package.json on the command line:

yarn add @appsignal/javascript @appsignal/vue
npm install --save @appsignal/javascript @appsignal/vue

Usage

Vue.config.errorHandler

The default Vue integration is a function that binds to Vue's global errorHandler hook.

Vue v2

In a new Vue v2 app created using @vue/cli, your main.js/.ts file would look something like this:

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
 
import Appsignal from "@appsignal/javascript";
import { errorHandler } from "@appsignal/vue";
 
const appsignal = new Appsignal({
  key: "YOUR FRONTEND API KEY",
});
 
Vue.config.errorHandler = errorHandler(appsignal, Vue);
 
new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

Vue v3

Version 3 of Vue includes a change to the way you'd use our Vue integration. Instead of attaching it to the global Vue object, you would use it like this instead:

import { createApp } from "vue";
import App from "./App.vue";
 
import Appsignal from "@appsignal/javascript";
import { errorHandler } from "@appsignal/vue";
 
const appsignal = new Appsignal({
  key: "YOUR FRONTEND API KEY",
});
 
const app = createApp(App)
app.config.errorHandler = errorHandler(appsignal, app)
app.mount('#app')

Need more help?

Contact us and speak directly with the engineers working on AppSignal. They will help you get set up, tweak your code and make sure you get the most out of using AppSignal.

Contact us

Start a trial - 30 days free

AppSignal is a great way to monitor your Ruby, Elixir & Node.js applications. Works great with Rails, Phoenix, Express and other frameworks, with support for background jobs too. Let's improve your apps together.

Start a trial