# vue_ipc

> A IPC Render Plugin for vue + electron

Latest version **1.0.4** (published 2020-06-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue_ipc
pnpm add vue_ipc
yarn add vue_ipc
bun add vue_ipc
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2020-06-26 |
| First published | 2020-06-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 5.8 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 31 |
| Author | zhangwei |
| Maintainers | wavenote |
| Keywords | vue, ipc, electron, plugin |

## Links

- npm: https://www.npmjs.com/package/vue_ipc
- Repository: https://github.com/ZhangWei-KUMO/vue_ipc
- Homepage: https://github.com/ZhangWei-KUMO/vue_ipc#readme
- Issues: https://github.com/ZhangWei-KUMO/vue_ipc/issues
- npm.io page: https://npm.io/package/vue_ipc

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^2.6.11

## Recent versions

- 1.0.4 (latest) — 2020-06-26
- 1.0.3 — 2020-06-26
- 1.0.2 — 2020-06-26
- 1.0.1 — 2020-06-26

## README

# vue_ipc

A IPC Render Plugin for vue + electron, you can simply communicate with electron main process, just like ajax。


## Install

```bash
npm run install vue_ipc
# or
yarn add vue_ipc
```

## Usage

Firstly, import your Vue project:

```js
// main.js 
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import VueIPC from 'vue_ipc';

+ Vue.use(VueIPC);

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
```

You can use `$ipcRenderer` object to send and listen message:

```js
export default {
  name: "Home",
  data() {
    return {
      loading: false,
      error: null
    };
  },
  created() {
  // send message to main process
+  this.$ipcRenderer.send("GET", "/video/list?type=history");
   // listen response message from main process 
+ this.$ipcRenderer.once("SERVER_NORMAL_MSG", data => {
        this.videos = data.video;
      });
  }
};
```

The edit Electron `main.js/background.js`,like this:

```js
import { ipcMain } from 'electron';
import axios from 'axios';

const API_ADDRESS = "https:www.xxx.com/api";

  ipcMain.on("CLIENT_NORMAL_MSG", async (event, arg) => {
    let remote_url = `${API_ADDRESS}${arg.url}`;
    try {
      let res = await axios.get(remote_url);
      if (res.status === 200) {
        event.reply("SERVER_NORMAL_MSG", res.data)
      }
    } catch (e) {
      event.reply(SERVER_NORMAL_MSG, {
        success: false,
        error: `server error code: ${e.status} msg: ${e.message}`
      })
    }
  })
```

## Methods
| Method | type | Description                                                                                                    |
| :----- | :--- | :------------------------------------------------------------------------------------------------------------- |
| send   | func | Send message to electron main process from render process, accept `method`,`URL`,`body` three arguments        |
| once   | func | listen message from electron main process to render process, accept a  signal argument and a callback function |

## Send Function Arguments

| Name   | type   | Description                                                          |
| :----- | :----- | :------------------------------------------------------------------- |
| method | String | Normal HTTP Request methods                                          |
| URL    | String | api url                                                              |
| body   | Object | This is an optional argument,if you use GET method,you can ignore it |

---
_Source: https://npm.io/package/vue_ipc · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._