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

## Installatie

### Met npm of yarn

Voeg de pakketten `@appsignal/vue` en `@appsignal/javascript` toe aan uw `package.json`. Voer vervolgens `npm install`/`yarn install` uit.

U kunt deze pakketten ook via de command line aan uw `package.json` toevoegen:

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

### Met JSPM.io import maps

Met de [JSPM.io import map generator](https://generator.jspm.io/) kunt u een import map genereren voor de afhankelijkheden van uw applicatie.

Voeg `@appsignal/javascript` en `@appsignal/vue` toe aan de lijst met dependencies in de generator, en voeg vervolgens de gegenereerde import map en ES module shims toe aan de code van uw applicatie.

### Met `rails-importmap`

Gebruik het volgende commando om deze pakketten toe te voegen aan de import maps van uw Rails-applicatie:

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

## Gebruik

### `Vue.config.errorHandler`

De standaard Vue-integratie is een functie die zich bindt aan de globale `errorHandler`-hook van Vue.

#### Vue v2

In een nieuwe Vue v2-app die met `@vue/cli` is aangemaakt, ziet uw `main.js`/`.ts`-bestand er ongeveer zo uit:

<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

Versie 3 van Vue bevat een wijziging in de manier waarop u onze Vue-integratie zou gebruiken. In plaats van deze aan het globale `Vue`-object te koppelen, gebruikt u deze als volgt:

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