# Installation

[![npm version](https://img.shields.io/npm/v/@foresightjs/vue.svg)](https://www.npmjs.com/package/@foresightjs/vue) [![npm downloads](https://img.shields.io/npm/dt/@foresightjs/vue.svg)](https://www.npmjs.com/package/@foresightjs/vue)

`@foresightjs/vue` is the official Vue 3 package for ForesightJS. It ships the [`v-foresight`](/docs/vue/directive.md) directive for the common case, plus the [`useForesight`](/docs/vue/useForesight.md) and [`useForesightEvent`](/docs/vue/useForesightEvent.md) composables and the [`Foresight`](/docs/vue/foresight-component.md) component when you want the element's prediction state.

```
npm install @foresightjs/vue
# or
pnpm add @foresightjs/vue
# or
yarn add @foresightjs/vue
```

```
import { useForesight, vForesight, ForesightManager } from "@foresightjs/vue"
```

## Configuring the manager[​](#configuring-the-manager "Direct link to Configuring the manager")

You don't have to configure anything. The manager auto-initializes with sensible defaults the first time you register an element.

If you want to tweak global behaviour, call `ForesightManager.initialize()` once in your `main.ts`. See [Initialize the Manager](/docs/vue/initialize-the-manager.md) and [Global Settings](/docs/vue/configuration/global-settings.md).

## Devtools[​](#devtools "Direct link to Devtools")

The visual [Development Tools](/docs/vue/devtools.md) live in their own package (`js.foresight-devtools`) and work the same regardless of framework.