v-foresight

v-foresight is the simplest way to add prefetching to a Vue app. Put it on an element, give it a callback (or an options object), and it registers and unregisters the element for you. Reach for the useForesight composable instead when you need the element's prediction state.

Register the directive

Register it globally once in your main.ts:

import { createApp } from "vue"
import { vForesight } from "@foresightjs/vue"
import App from "./App.vue"

createApp(App).directive("foresight", vForesight).mount("#app")

Or import it into a single component and use it locally:

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

Usage

The directive takes either a callback function or a full options object.

Callback shorthand

<script setup lang="ts">
  function handlePrefetch() {
    console.log("Prefetching...")
  }
</script>

<template>
  <button v-foresight="handlePrefetch">Hover to prefetch</button>
</template>

The callback receives the element's ForesightElementState.

With options

For more control, pass any registration options:

<template>
  <button
    v-foresight="{
      callback: handlePrefetch,
      hitSlop: { top: 20, bottom: 20, left: 20, right: 20 },
      name: 'button-with-options',
      reactivateAfter: 3000,
    }"
  >
    Hover to prefetch
  </button>
</template>

When the bound value changes reference, the directive updates the existing registration in place. Each options object describes the full configuration, so omitted fields reset to their defaults. Replace the options object when updating it, as in-place mutations of the same object are skipped.