Vite+Electron to quickly build VUE3 desktop applications

1. Introduction

First, let me introduce Vite and Electron.

• Vite is a new front-end building tool that can significantly improve the front-end development experience. Launched by Youda, who posted a message saying "I can never go back to webpack..."
• Electron is a framework for building desktop applications using JavaScript, HTML, and CSS. Electron embeds Chromium and Node.js into the binary, allowing you to maintain a single JavaScript codebase and create cross-platform apps that run on Windows, macOS, and Linux — no native development experience required.

When I started to think about using Vue to develop a desktop application, I first searched and found out that there are currently two ready-made solutions:

• electron-vue: This project has good integration and complete encapsulation. A lot of Chinese articles are about this solution, so you can start using it directly. However, the problem is that the version of built-in electron is too low. The version I saw when writing the article was 2.0.4, while the latest electron version is 15.1.2.
• Vue CLI Plugin Electron Builder: This solution is integrated into vue-cli. You can get started directly after using vue add electron-builder, eliminating the basic configuration steps. However, it can only be used under vue-cli and cannot be used with vite.

Therefore, if you want to use vite and electron, you need to configure them yourself.

2. Create a Vite project

1. Install Vite

yarn create vite

2. Create a project

The creation command is as follows:

yarn create vite <your-vue-app-name> --template vue

Create a project here named kuari.

yarn create vite kuari --template vue

3. Enter and run

Enter the project and install the dependencies before running.

cd kuari
yarn install
yarn-dev

The moment the run command is typed, it is almost already running, worthy of being called vite. At this time, follow the output, open the address preview, and you can see the initialization page.

At this point, a basic vite project has been created.

3. Configure Electron

1. Official Documentation

In the quick start document on the Electron official website, there is an official case study on how to create an electron application using html, javascript, and css, and the vite+electron solution also draws on it.

2. Installation

First install the electron to vite application. The current version of electron is ^15.1.2,.

yarn add --dev electron

3. Configuration Files

1) vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path' // New // https://vitejs.dev/config/
export default defineConfig({
  base: path.resolve(__dirname, './dist/'), // Add plugins: [vue()]
})

2) main.js
Create a new file main.js. Note that the loading path of index.html in the content is different from the configuration given on the electron official website.

// main.js

// Module that controls the application lifecycle and creates native browser windows const { app, BrowserWindow } = require('electron')
const path = require('path')

function createWindow () {
  // Create a browser window const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // Load index.html
  mainWindow.loadFile('dist/index.html') // This is different from the path on the electron official website, please note // Open the development tools // mainWindow.webContents.openDevTools()
}

// This program will be called when Electron finishes initialization // and creates the browser window. // Some APIs can only be used after the ready event is triggered.
app.whenReady().then(() => {
  createWindow()

  app.on('activate', function () {
    // Normally on macOS, when you click an application icon in the dock, the program will create a new window if there are no other // windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// Except on macOS, exit the program when all windows are closed. Therefore, it is usually necessary for programs and their icons on the // taskbar to remain active until the user quits them using Cmd + Q.
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

// In this file, you can include all the rest of your application's code,
// It can also be split into several files and then imported using require.

3) preload.js

Create a new file preload.js.

// preload.js

// All Node.js APIs are available during the preloading process.
// It has the same sandbox as Chrome extensions.
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const dependency of ['chrome', 'node', 'electron']) {
    replaceText(`${dependency}-version`, process.versions[dependency])
  }
})

4) package.json

To ensure that you can run related electron commands, you need to modify the package.json file.

First, you need to set the main property. Electron will look for the index.js file in the project root directory by default at the beginning. Here we use main.js, so we need to define it.

// package.json

{
  "name": "kuari",
  "version": "0.0.0",
  "main": "main.js", // Add "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.16"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.9.3",
    "electron": "^15.1.2",
    "vite": "^2.6.4"
  }
}

Finally, we need to add electron's run command.

// package.json

{
  "name": "kuari",
  "version": "0.0.0",
  "main": "main.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "electron:serve": "electron ." // New},
  "dependencies": {
    "vue": "^3.2.16"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.9.3",
    "electron": "^15.1.2",
    "vite": "^2.6.4"
  }
}

4. Run

Enter the following command directly in the terminal:

yarn electron:serve

Then we can see our desktop application appear!

5. Final Thoughts

I have always used Vue CLI Plugin Electron Builder for my previous projects. This time, I have a project that I will develop with electron first, push it out and see how it goes. Later, I will use Swift to redevelop a Mac desktop application depending on the situation. I just wanted to try something new, I never had the chance to try Vite.

Electron is really convenient, but the packaged application is too big, which is really a flaw. This time the target group is first of all Windows users, so let’s use electron!

This is the end of this article about how to quickly build a VUE3 desktop application with Vite+Electron. For more information about how to quickly build VUE3 with Vite+Electron, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!