> ## Documentation Index
> Fetch the complete documentation index at: https://docs.appsignal.com/llms.txt
> Use this file to discover all available pages before exploring further.

# @appsignal/vue

## Installation

### With npm or yarn

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:

<CodeGroup>
  ```sh Shell theme={null}
  yarn add @appsignal/javascript @appsignal/vue
  npm install @appsignal/javascript @appsignal/vue
  ```
</CodeGroup>

### With JSPM.io import maps

Using the [JSPM.io import map generator](https://generator.jspm.io/), you can generate an import map for your application's dependencies.

Add `@appsignal/javascript` and `@appsignal/vue` to the dependencies list in the generator, then add the generated import map and ES module shims to your application's code.

### With `rails-importmap`

Use the following command to add these packages to your Rails application's import maps:

<CodeGroup>
  ```sh Shell theme={null}
  ./bin/importmap pin @appsignal/javascript @appsignal/vue
  ```
</CodeGroup>

## 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:

<CodeGroup>
  ```js JavaScript theme={null}
  import Vue from "vue";
  import App from "./App.vue";
  import router from "./router";
  import store from "./store";

  import { appsignal } from "./appsignal";
  import { errorHandler } from "@appsignal/vue";

  Vue.config.errorHandler = errorHandler(appsignal, Vue);

  new Vue({
    router,
    store,
    render: (h) => h(App),
  }).$mount("#app");
  ```
</CodeGroup>

#### 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:

<CodeGroup>
  ```js JavaScript theme={null}
  import { createApp } from "vue";
  import App from "./App.vue";

  import { appsignal } from "./appsignal";
  import { errorHandler } from "@appsignal/vue";

  const app = createApp(App);
  app.config.errorHandler = errorHandler(appsignal, app);
  app.mount("#app");
  ```
</CodeGroup>