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

## Instalação

### Com npm ou yarn

Adicione os pacotes `@appsignal/vue` e `@appsignal/javascript` ao seu `package.json`. Em seguida, execute `npm install`/`yarn install`.

Você também pode adicionar esses pacotes ao seu `package.json` pela linha de comando:

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

### Com import maps do JSPM.io

Usando o [gerador de import maps do JSPM.io](https://generator.jspm.io/), você pode gerar um import map para as dependências da sua aplicação.

Adicione `@appsignal/javascript` e `@appsignal/vue` à lista de dependências no gerador, depois adicione o import map gerado e o ES module shims ao código da sua aplicação.

### Com `rails-importmap`

Use o comando a seguir para adicionar esses pacotes aos import maps da sua aplicação Rails:

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

## Uso

### `Vue.config.errorHandler`

A integração padrão do Vue é uma função que se vincula ao hook global `errorHandler` do Vue.

#### Vue v2

Em uma nova aplicação Vue v2 criada usando `@vue/cli`, seu arquivo `main.js`/`.ts` se pareceria com algo assim:

<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

A versão 3 do Vue inclui uma mudança na forma como você usaria nossa integração com o Vue. Em vez de anexá-la ao objeto global `Vue`, você a usaria assim:

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