An EventSource or Server-Sent-Events instance opens a persistent connection to an HTTP server, which sends events in text/event-stream format.


import { useEventSource } from '@vueuse/core'

const { status, data, error, close } = useEventSource('https://event-source-url')
statusRef<string>A read-only value representing the state of the connection. Possible values are CONNECTING (0), OPEN (1), or CLOSED (2)
dataRef<string | null>Reference to the latest data received via the EventSource, can be watched to respond to incoming messages
eventSourceRef<EventSource | null>Reference to the current EventSource instance
close() => voidCloses the EventSource connection gracefully.

Type Declarations

 * Reactive wrapper for EventSource.
 * @see
 * @see EventSource
 * @param url
 * @param events
export declare function useEventSource(
  url: string,
  events?: Array<string>
): {
  eventSource: Ref<EventSource | null>
  event: Ref<string | null>
  data: Ref<string | null>
  status: Ref<"OPEN" | "CONNECTING" | "CLOSED">
  error: Ref<Event | null>
  close: () => void
export declare type UseEventListenerReturn = ReturnType<typeof useEventListener>