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

### Mit npm oder yarn

Fügen Sie die Pakete `@appsignal/vue` und `@appsignal/javascript` zu Ihrer `package.json` hinzu. Führen Sie dann `npm install`/`yarn install` aus.

Sie können diese Pakete auch auf der Kommandozeile zu Ihrer `package.json` hinzufügen:

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

### Mit JSPM.io Import Maps

Mit dem [JSPM.io Import Map Generator](https://generator.jspm.io/) können Sie eine Import Map für die Abhängigkeiten Ihrer Anwendung generieren.

Fügen Sie `@appsignal/javascript` und `@appsignal/vue` zur Liste der Abhängigkeiten im Generator hinzu, und integrieren Sie dann die generierte Import Map sowie ES-Module-Shims in den Code Ihrer Anwendung.

### Mit `rails-importmap`

Verwenden Sie den folgenden Befehl, um diese Pakete zu den Import Maps Ihrer Rails-Anwendung hinzuzufügen:

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

## Verwendung

### `Vue.config.errorHandler`

Die standardmäßige Vue-Integration ist eine Funktion, die sich an Vues globalen `errorHandler`-Hook bindet.

#### Vue v2

In einer neuen, mit `@vue/cli` erstellten Vue-v2-App würde Ihre Datei `main.js`/`.ts` etwa so aussehen:

<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 von Vue enthält eine Änderung in der Art und Weise, wie Sie unsere Vue-Integration verwenden würden. Anstatt sie an das globale `Vue`-Objekt anzuhängen, verwenden Sie sie stattdessen so:

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