# 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.