Migrating to v4

In v3 there was no Vue package - the docs handed you a directive and composable to copy into your own project. v4 replaces those with the official @foresightjs/vue package. Install it, delete your copied files, and update a couple of names.

Install the package and delete your hand-rolled vForesight.ts / useForesight.ts:

npm install @foresightjs/vue

Directive

- import { vForesight } from "@/directives/vForesight"
+ import { vForesight } from "@foresightjs/vue"

  app.directive("foresight", vForesight)

The usage in your templates is unchanged.

Composable

The composable lost the templateRefKey string. Instead it returns an elementRef function you bind directly:

- import { useForesight } from "./composables/useForesight"
+ import { useForesight } from "@foresightjs/vue"

- const { templateRef } = useForesight({ templateRefKey: "myButton", callback })
+ const { elementRef } = useForesight({ callback })

- <button ref="myButton">Hover</button>
+ <button :ref="elementRef">Hover</button>

You also get the reactive state back as refs instead of a registerResults object.

Core changes

The core js.foresight library also has a few breaking changes. The package handles most of these for you, but they matter if you call register() or listen to events directly.

The register() call itself is unchanged, but element data is now an immutable state snapshot you can subscribe to - the foundation the wrapper packages are built on:

• ForesightElementData is now ForesightElementState. Your callback receives the flat state snapshot: callback: (state: ForesightElementState) => void. See TypeScript.
• register() returns the state plus unregister, subscribe and getSnapshot. isTouchDevice is gone from the result; touch devices are handled internally by the configured touchDeviceStrategy global setting.
• The elementDataUpdated, elementOptionsUpdated and elementReactivated events are removed. Per-element changes are now observed through the subscribe/getSnapshot pair returned by register(). The remaining events carry the state in a state field instead of elementData.
• Detached elements are parked, not unregistered. Removing an element from the DOM no longer emits elementUnregistered with reason disconnected; the element stays registered but inactive and resumes when it reconnects.
• New enabled element option. Set it to false to keep an element registered but excluded from prediction.