1---
2category: '@Electron'
3---
4 
5# useIpcRenderer
6 
7Provides [ipcRenderer](https://www.electronjs.org/docs/api/ipc-renderer) and all of its APIs with Vue reactivity.
8 
9## Usage
10 
11```ts
12import { useIpcRenderer } from '@vueuse/electron'
13import { computed } from 'vue'
14 
15// enable nodeIntegration if you don't provide ipcRenderer explicitly
16// see: https://www.electronjs.org/docs/api/webview-tag#nodeintegration
17const ipcRenderer = useIpcRenderer()
18 
19// Ref result will return
20const result = ipcRenderer.invoke<string>('custom-channel', 'some data')
21const msg = computed(() => result.value?.msg)
22 
23// remove listener automatically on unmounted
24ipcRenderer.on('custom-event', (event, ...args) => {
25  console.log(args)
26})
27```
28 
29### Available Methods
30 
31| Method                                     | Description                                          |
32| ------------------------------------------ | ---------------------------------------------------- |
33| `on(channel, listener)`                    | Listen to channel. Auto-removes listener on unmount. |
34| `once(channel, listener)`                  | Listen to channel once                               |
35| `removeListener(channel, listener)`        | Remove specific listener                             |
36| `removeAllListeners(channel)`              | Remove all listeners for channel                     |
37| `send(channel, ...args)`                   | Send async message to main process                   |
38| `invoke(channel, ...args)`                 | Send message and get response as `ShallowRef`        |
39| `sendSync(channel, ...args)`               | Send sync message and get response as `ShallowRef`   |
40| `postMessage(channel, message, transfer?)` | Send message with transferable objects               |
41| `sendTo(webContentsId, channel, ...args)`  | Send to specific webContents                         |
42| `sendToHost(channel, ...args)`             | Send to webview host                                 |
43 
44### With Custom IpcRenderer
45 
46If `nodeIntegration` is disabled, you can pass the `ipcRenderer` instance explicitly:
47 
48```ts
49import { useIpcRenderer } from '@vueuse/electron'
50import { ipcRenderer } from 'electron'
51 
52const ipc = useIpcRenderer(ipcRenderer)
53```
54 
55## Type Declarations
56 
57```ts
58/**
59 * Result from useIpcRenderer
60 *
61 * @see https://www.electronjs.org/docs/api/ipc-renderer
62 */
63export interface UseIpcRendererReturn {
64  /**
65   * Listens to channel, when a new message arrives listener would be called with listener(event, args...).
66   * [ipcRenderer.removeListener](https://www.electronjs.org/docs/api/ipc-renderer#ipcrendererremovelistenerchannel-listener) automatically on unmounted.
67   *
68   * @see https://www.electronjs.org/docs/api/ipc-renderer#ipcrendereronchannel-listener
69   */
70  on: (channel: string, listener: IpcRendererListener) => IpcRenderer
71  /**
72   * Adds a one time listener function for the event. This listener is invoked only the next time a message is sent to channel, after which it is removed.
73   *
74   * @see https://www.electronjs.org/docs/api/ipc-renderer#ipcrendereroncechannel-listener
75   */
76  once: (
77    channel: string,
78    listener: (event: IpcRendererEvent, ...args: any[]) => void,
79  ) => IpcRenderer
80  /**
81   * Removes the specified listener from the listener array for the specified channel.
82   *
83   * @see https://www.electronjs.org/docs/api/ipc-renderer#ipcrendererremovelistenerchannel-listener
84   */
85  removeListener: (
86    channel: string,
87    listener: (...args: any[]) => void,
88  ) => IpcRenderer
89  /**
90   * Removes all listeners, or those of the specified channel.
91   *
92   * @see https://www.electronjs.org/docs/api/ipc-renderer#ipcrendererremovealllistenerschannel
93   */
94  removeAllListeners: (channel: string) => IpcRenderer
95  /**
96   * Send an asynchronous message to the main process via channel, along with arguments.
97   *
98   * @see https://www.electronjs.org/docs/api/ipc-renderer#ipcrenderersendchannel-args
99   */
100  send: (channel: string, ...args: any[]) => void
101  /**
102   * Returns Promise<any> - Resolves with the response from the main process.
103   * Send a message to the main process via channel and expect a result ~~asynchronously~~.
104   * As composition-api, it makes asynchronous operations look like synchronous.
105   *
106   * @see https://www.electronjs.org/docs/api/ipc-renderer#ipcrendererinvokechannel-args
107   */
108  invoke: <T>(channel: string, ...args: any[]) => ShallowRef<T | null>
109  /**
110   * Returns any - The value sent back by the ipcMain handler.
111   * Send a message to the main process via channel and expect a result synchronously.
112   *
113   * @see https://www.electronjs.org/docs/api/ipc-renderer#ipcrenderersendsyncchannel-args
114   */
115  sendSync: <T>(channel: string, ...args: any[]) => ShallowRef<T | null>
116  /**
117   * Send a message to the main process, optionally transferring ownership of zero or more MessagePort objects.
118   *
119   * @see https://www.electronjs.org/docs/api/ipc-renderer#ipcrendererpostmessagechannel-message-transfer
120   */
121  postMessage: (channel: string, message: any, transfer?: MessagePort[]) => void
122  /**
123   * Sends a message to a window with webContentsId via channel.
124   *
125   * @see https://www.electronjs.org/docs/api/ipc-renderer#ipcrenderersendtowebcontentsid-channel-args
126   */
127  sendTo: (webContentsId: number, channel: string, ...args: any[]) => void
128  /**
129   * Like ipcRenderer.send but the event will be sent to the <webview> element in the host page instead of the main process.
130   *
131   * @see https://www.electronjs.org/docs/api/ipc-renderer#ipcrenderersendtohostchannel-args
132   */
133  sendToHost: (channel: string, ...args: any[]) => void
134}
135/**
136 * Get the `ipcRenderer` module with all APIs.
137 *
138 * @see https://www.electronjs.org/docs/api/ipc-renderer#ipcrenderersendtohostchannel-args
139 * @see https://vueuse.org/useIpcRenderer
140 */
141export declare function useIpcRenderer(
142  ipcRenderer?: IpcRenderer,
143): UseIpcRendererReturn
144```
145