# Quick Start

Register your first element with ForesightJS in Vue and see how prediction works.

## Basic Usage Example[​](#basic-usage-example "Direct link to Basic Usage Example")

The simplest way to register an element is the [`v-foresight`](/docs/vue/directive.md) directive. Put it on an element and give it a callback (this is where your prefetching logic goes):

```
<script setup lang="ts">
  import { vForesight } from "@foresightjs/vue"
</script>

<template>
  <button v-foresight="() => console.log('prefetch logic here')">Prefetch</button>
</template>
```

That's it!

Unregistration is automatic

The directive registers the element when it mounts and unregisters it when it unmounts, so you never have to call `unregister()` yourself. The same goes for the `useForesight` composable below.

## Provide registration options[​](#provide-registration-options "Direct link to Provide registration options")

To configure the element, pass an options object instead of a bare callback:

```
<template>
  <button
    v-foresight="{
      callback: () => console.log('prefetch logic here'),
      hitSlop: 50, // slop around the element, making its hitbox bigger
      name: 'My Foresight button!', // name visible in the debug tools
      meta: {
        route: '/about',
      }, // your custom meta data for analytics
      reactivateAfter: 5 * 60 * 1000, // time for the element to reactivate after the callback has been hit
    }"
  >
    Prefetch
  </button>
</template>
```

See [registration options](/docs/vue/configuration/registration-options.md) for the full list.

## Reading prediction state[​](#reading-prediction-state "Direct link to Reading prediction state")

When you want to read the element's prediction state, you have two options: the [`useForesight`](/docs/vue/useForesight.md) composable or the [`Foresight`](/docs/vue/foresight-component.md) component. The composable returns the state as reactive refs plus an `elementRef` function to bind to the element:

```
<script setup lang="ts">
  import { useForesight } from "@foresightjs/vue"

  const { elementRef, isPredicted } = useForesight({
    callback: () => console.log("prefetch logic here"),
    name: "my-button",
  })
</script>

<template>
  <button :ref="elementRef">{{ isPredicted ? "Predicted!" : "Prefetch" }}</button>
</template>
```

## Development Tools[​](#development-tools "Direct link to Development Tools")

ForesightJS has dedicated [Development Tools](/docs/vue/devtools.md) that help you understand and tune how prediction is working in your application:

```
pnpm add js.foresight-devtools
# or
npm install js.foresight-devtools
# or
yarn add js.foresight-devtools
```

```
import { ForesightDevtools } from "js.foresight-devtools"

// Initialize development tools
ForesightDevtools.initialize({
  // optional props
})
```