# Foresight component

`Foresight` is the component form of [`useForesight`](/docs/vue/useForesight.md): one instance, one registration. It renders in one of two ways.

## Rendering an element with `as`[​](#rendering-an-element-with-as "Direct link to rendering-an-element-with-as")

With `as`, `Foresight` renders that element itself and registers it.

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

<template>
  <Foresight as="button" :callback="() => prefetch('/checkout')" @click="checkout">
    Checkout
  </Foresight>
</template>
```

`as` accepts any element tag (`"button"`, `"a"`, `"div"`, ...) or a component whose root is a DOM element.

note

In the `as` form there is no way to pass your own `ref` to the rendered element, `Foresight` uses the ref slot for its registration. If you need the DOM node, use the render-prop form below and attach both refs yourself.

### Reading state in `as` form[​](#reading-state-in-as-form "Direct link to reading-state-in-as-form")

To use the [reactive state](/docs/vue/useForesight.md#reactive-state) in this form, read it from the scoped default slot:

```
<Foresight as="button" :callback="() => prefetch('/checkout')" #default="{ isCallbackRunning }">
  {{ isCallbackRunning ? "Prefetching…" : "Checkout" }}
</Foresight>
```

## Render-prop form[​](#render-prop-form "Direct link to Render-prop form")

Without `as`, `Foresight` renders only its default slot. The scoped slot receives the [reactive state](/docs/vue/useForesight.md#reactive-state) plus the `elementRef` to attach, which gives full control over the markup:

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

<template>
  <Foresight
    foresight-name="checkout"
    :callback="() => prefetch('/checkout')"
    #default="{ elementRef, isPredicted }"
  >
    <button :ref="elementRef" :class="{ predicted: isPredicted }">Checkout</button>
  </Foresight>
</template>
```

You must bind `elementRef` to an element with `:ref="elementRef"`, without it nothing is registered with `Foresight`.

## Options[​](#options "Direct link to Options")

`Foresight` takes the same options as [`useForesight`](/docs/vue/useForesight.md), passed as props. The only renamed option is `name`, on the component it is `foresightName`, so the HTML `name` attribute (on `input`, `button`, `select`, ...) falls through to the element like any other attribute.

## Dynamic lists[​](#dynamic-lists "Direct link to Dynamic lists")

`Foresight` can be rendered in a `v-for`, registering one element per item:

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

  const links = [
    { href: "/about", label: "About" },
    { href: "/contact", label: "Contact" },
  ]
</script>

<template>
  <nav>
    <Foresight
      v-for="link in links"
      :key="link.href"
      as="a"
      :href="link.href"
      :foresight-name="link.label"
      :callback="() => prefetch(link.href)"
    >
      {{ link.label }}
    </Foresight>
  </nav>
</template>
```