# useForesightEvent

This is meant for high-level, app-wide use cases (analytics, debugging, a global prediction counter), not per-element logic. `useForesightEvent` subscribes a component to the [`ForesightManager` events](/docs/vue/events.md). Pass the event name and a listener, and the composable adds and removes the listener for you.

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

  const hits = ref(0)

  useForesightEvent("callbackInvoked", () => {
    hits.value++
  })
</script>

<template>
  <p>{{ hits }} prefetches triggered</p>
</template>
```

You don't need to remove the listener yourself, the composable does it for you when the component is disposed.

See [Events](/docs/vue/events.md) for the full list of event names and their payloads.