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

### Avec npm ou yarn

Ajoutez les packages `@appsignal/vue` et `@appsignal/javascript` à votre `package.json`. Ensuite, exécutez `npm install`/`yarn install`.

Vous pouvez également ajouter ces packages à votre `package.json` en ligne de commande :

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

### Avec les import maps JSPM.io

Avec le [générateur d'import maps JSPM.io](https://generator.jspm.io/), vous pouvez générer une import map pour les dépendances de votre application.

Ajoutez `@appsignal/javascript` et `@appsignal/vue` à la liste des dépendances dans le générateur, puis ajoutez l'import map générée et les shims des modules ES au code de votre application.

### Avec `rails-importmap`

Utilisez la commande suivante pour ajouter ces packages aux import maps de votre application Rails :

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

## Utilisation

### `Vue.config.errorHandler`

L'intégration Vue par défaut est une fonction qui se lie au hook global `errorHandler` de Vue.

#### Vue v2

Dans une nouvelle application Vue v2 créée avec `@vue/cli`, votre fichier `main.js`/`.ts` ressemblerait à ceci :

<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

La version 3 de Vue inclut un changement dans la façon dont vous utiliseriez notre intégration Vue. Au lieu de l'attacher à l'objet global `Vue`, vous l'utiliseriez de cette manière :

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