Use Vue3 and Electron to implement process communication, create windows and pass parameters

Electron is a popular desktop application development framework, while Vue is a popular JavaScript framework. Combining these two frameworks can create powerful desktop applications. This article will introduce how to use Vue3 and Electron to implement process communication, create windows and pass parameters.

1. Create a Vue3 project

First, we need to create a Vue3 project. Run the following command in the terminal:

vue create electron-ipc-demo

2. Install Electron

Run the following command in the project root directory to install Electron:

npm install electron --save-dev

3. Configure Electron

Create a file named main.js in the project root directory. This file will be our Electron main process. In this file we need to add the following code:

const {
    
     app, BrowserWindow, ipcMain } = require('electron')
const path = require('path')

function createWindow () {
    
    
  // 创建浏览器窗口
  const win = new BrowserWindow({
    
    
    width: 800,
    height: 600,
    webPreferences: {
    
    
      nodeIntegration: true, // 将contextIsolation设置为false，以便我们可以在渲染进程中使用Vue
      contextIsolation: false,
      enableRemoteModule: true // 允许使用remote模块
    }
  })

  // 加载应用的index.html
  win.loadFile('dist/index.html')

  // 打开开发者工具
  win.webContents.openDevTools()

  // 监听从渲染进程发来的消息
  ipcMain.on('open-new-window', (event, arg) => {
    
    
    // 创建一个新的浏览器窗口
    const win2 = new BrowserWindow({
    
    
      width: 600,
      height: 400,
      webPreferences: {
    
    
        nodeIntegration: true,
        contextIsolation: false,
        enableRemoteModule: true
      }
    })

    // 加载应用的newWindow.html并传递参数
    win2.loadFile('dist/newWindow.html', {
    
     query: {
    
     arg } })
  })
}

// 当 Electron 完成初始化并准备创建浏览器窗口时调用此方法
app.whenReady().then(() => {
    
    
  createWindow()
})

// 当所有窗口都关闭时退出应用程序
app.on('window-all-closed', () => {
    
    
  if (process.platform !== 'darwin') {
    
    
    app.quit()
  }
})

This code will create a new Electron window and load the index.html file of our Vue project. We also enabled developer tools for easier debugging. We also added an ipcMain listener that receives messages sent from the rendering process and creates a new browser window after receiving the message.

4. Create new widget

Create a file named NewWindow.vue in the src/views directory. This file will be our new widget. In this component we need to add the following code:

<template>
  <div>
    <h1>New Window</h1>
    <p>{
   
   { arg }}</p>
  </div>
</template>

<script>
export default {
  props: ['arg']
}
</script>

<style>
h1 {
  font-size: 28px;
  margin-bottom: 20px;
}

p {
  font-size: 18px;
}
</style>

This code creates a new widget that contains a title and a paragraph that displays the passed parameters.

5. Add button in App.vue

Add a button in src/App.vue to trigger the operation of opening a new window. Add the following code to the template:

<template>
  <div id="app">
    <h1>Hello World</h1>
    <button @click="openNewWindow">Open New Window</button>
  </div>
</template>

<script>
const { ipcRenderer } = require('electron')

export default {
  name: 'App',
  methods: {
    openNewWindow() {
      ipcRenderer.send('open-new-window', 'Hello from main window!')
    }
  }
}
</script>

This code adds a button and sends a message to the main Electron process when the button is clicked, triggering the opening of a new window.

6. Build the application

Now, we can build our application. Run the following command in the terminal:

npm run build

This will generate a dist directory containing our application files.

7. Run application

Finally, we can run our application. Run the following command in the terminal:

npm run electron:serve

This will start the Electron application and display our Vue application.

8. result

Now our application is running normally. When we click the "Open New Window" button, the application will open the NewWindow.vue component in a new window and pass the parameter "Hello from main window!" to the component. In the NewWindow.vue component, we can get this parameter through props and display it on the page.

Through this example, we learned how to use Vue3 and Electron to implement process communication, create windows and pass parameters. Using Electron's ipcMain and ipcRenderer modules, we can easily pass messages and data between the main process and the rendering process to implement various complex application functions.