1---
2category: Browser
3---
4 
5# useBroadcastChannel
6 
7Reactive [BroadcastChannel API](https://developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel).
8 
9Closes a broadcast channel automatically component unmounted.
10 
11## Usage
12 
13The BroadcastChannel interface represents a named channel that any browsing
14context of a given origin can subscribe to. It allows communication between
15different documents (in different windows, tabs, frames, or iframes) of the
16same origin.
17 
18Messages are broadcasted via a message event fired at all BroadcastChannel
19objects listening to the channel.
20 
21```ts
22import { useBroadcastChannel } from '@vueuse/core'
23import { shallowRef } from 'vue'
24 
25const {
26  isSupported,
27  channel,
28  post,
29  close,
30  error,
31  isClosed,
32} = useBroadcastChannel({ name: 'vueuse-demo-channel' })
33 
34const message = shallowRef('')
35 
36message.value = 'Hello, VueUse World!'
37 
38// Post the message to the broadcast channel:
39post(message.value)
40 
41// Option to close the channel if you wish:
42close()
43```
44 
45## Type Declarations
46 
47```ts
48export interface UseBroadcastChannelOptions extends ConfigurableWindow {
49  /**
50   * The name of the channel.
51   */
52  name: string
53}
54/**
55 * Reactive BroadcastChannel
56 *
57 * @see https://vueuse.org/useBroadcastChannel
58 * @see https://developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel
59 * @param options
60 *
61 */
62export declare function useBroadcastChannel<D, P>(
63  options: UseBroadcastChannelOptions,
64): UseBroadcastChannelReturn<D, P>
65export interface UseBroadcastChannelReturn<D, P> extends Supportable {
66  channel: Ref<BroadcastChannel | undefined>
67  data: Ref<D>
68  post: (data: P) => void
69  close: () => void
70  error: ShallowRef<Event | null>
71  isClosed: ShallowRef<boolean>
72}
73```
74