feat .calude

.claude/skills/vueuse-functions/references/useBroadcastChannel.md

@@ -0,0 +1,74 @@
+---
+category: Browser
+---
+
+# useBroadcastChannel
+
+Reactive [BroadcastChannel API](https://developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel).
+
+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.
+
+```ts
+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
+
+```ts
+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>
+}
+```