stack/v1/packages/mosaic/framework/skills/vueuse-functions/references/useBroadcastChannel.md

category

category
Browser

useBroadcastChannel

Reactive BroadcastChannel API.

Closes a broadcast channel automatically component unmounted.

Usage

The BroadcastChannel interface represents a named channel that any browsing context of a given origin can subscribe to. It allows communication between different documents (in different windows, tabs, frames, or iframes) of the same origin.

Messages are broadcasted via a message event fired at all BroadcastChannel objects listening to the channel.

import { useBroadcastChannel } from '@vueuse/core';
import { shallowRef } from 'vue';

const { isSupported, channel, post, close, error, isClosed } = useBroadcastChannel({
  name: 'vueuse-demo-channel',
});

const message = shallowRef('');

message.value = 'Hello, VueUse World!';

// Post the message to the broadcast channel:
post(message.value);

// Option to close the channel if you wish:
close();

Type Declarations

export interface UseBroadcastChannelOptions extends ConfigurableWindow {
  /**
   * The name of the channel.
   */
  name: string;
}
/**
 * Reactive BroadcastChannel
 *
 * @see https://vueuse.org/useBroadcastChannel
 * @see https://developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel
 * @param options
 *
 */
export declare function useBroadcastChannel<D, P>(
  options: UseBroadcastChannelOptions,
): UseBroadcastChannelReturn<D, P>;
export interface UseBroadcastChannelReturn<D, P> {
  isSupported: ComputedRef<boolean>;
  channel: Ref<BroadcastChannel | undefined>;
  data: Ref<D>;
  post: (data: P) => void;
  close: () => void;
  error: ShallowRef<Event | null>;
  isClosed: ShallowRef<boolean>;
}