vue-composable

# Broadcast Channel API

BroadcastChannel (opens new window).

# Parameters

import { useBroadcastChannel } from "vue-composable";

const scroll = useBroadcastChannel(name, onBeforeClose?);
Parameters Type Required Default Description
name String true Name of the channel to be created
onBeforeClose Funcion false Passed function will be called before the broadcastChannel closes

# State

The useBroadcastChannel function exposes the following reactive state:

import { useBroadcastChannel } from "vue-composable";

const {
  supported,
  data,
  messageEvent,
  errorEvent,
  errored,
  isClosed
} = useBroadcastChannel();
State Type Description
supported boolean return true if the browser supports it
data Ref<T> last message data
messageEvent Ref<MessageEvent> Last event received
errorEvent Ref<MessageError> Last error Event (opens new window) received
errored Ref<boolean> true if received an invalid event
isClosed Ref<boolean> true if the broadcastChannel is closed

# Methods

The useBroadcastChannel function exposes the following methods:

import { useBroadcastChannel } from "vue-composable";

const { send, close, addListener } = useBroadcastChannel();
Signature Description
send(data) send data
close closes BroadcastChannel
addListener(cb, options?) Add new message listener

# Example

Supported: false

To test please open 2 or more tabs, press send and all the other tabs should show the message

# Code

<template>
  <div>
    <p>
      Supported: <b>{{ supported }}</b>
    </p>
    <p>
      To test please open 2 or more tabs, press send and all the other tabs
      should show the message
    </p>

    <p v-if="data">received: {{ data }}</p>

    <div>
      <input
        v-model="message"
        placeholder="Write a message"
        @keydown.enter="submitMessage"
      />
      <button @click="submitMessage">send</button>
    </div>
  </div>
</template>

<script>
import { useBroadcastChannel } from "vue-composable";
import { ref } from "@vue/composition-api";

export default {
  name: "broadcast-channel-example",

  setup() {
    const { supported, data, send } = useBroadcastChannel("composable-example");
    const message = ref("");
    const submitMessage = () => {
      send(message.value);
      message.value = "";
    };

    return {
      supported,
      data,
      message,
      submitMessage
    };
  }
};
</script>

← Geolocation API →