How to build a Vue3 desktop application

In this article, we will look at how to develop a Vue 3 desktop project with Vite.

Electron will be used in the project, one of the most popular frameworks for building cross-platform desktop applications using Javascript. Therefore, many popular applications are using Electron, such as VSCode, Slack, Twitch, etc.

Let’s take a look at what to do first:

Although this is just a basic Vite template, it runs in a dedicated program instead of a browser. This is a necessary step to building your own desktop application.

The following is the development process.

Create a basic Vite program

First, create a Vite application. I won’t go into detail about how Vite works here.

Execute the following command in the terminal:

npm init @vitejs/app
cd [project-name]
npm install

Done, try it in your browser first.

Simply run the npm run dev command in your terminal. Then open the local address in the browser, you can see this:

No problem, now it's time to add Electron to its settings.

Adding Electron to the Vite project

Here we follow the official quick start of Electron and make some adjustments in our Vite application.

First install Electron. Enter the following command in the terminal:

Install Electron nnpm install --save-dev electron

Next, take a look at the Electron manual.

The manual says that a simple Electron configuration requires four files:

• package.json - this already exists
• main.js
• preloader.js
• index.html

It looks like there are main.js and index.html files in the project, but they are Vite files, not Electron files. Vite files can only be used to run Vite programs, so a separate Electron file is also required.

main.js is used to create the desktop application and is loaded into index.html. It should also include the Vite application code we built.

Building a Vite Program

So first you have to build the Vite program. Because it needs to be integrated with Electron, some additional configuration is required. We want to make sure that when we build the project, all references to the final javascript and css files point to the correct paths.

The Vite project to be built will create a dist directory with the following structure.

But since our Electron code is in the root directory of the project, we should set the base of the entire project to the dist folder. This can be achieved by setting the base property in the vite.config.js file using the path library.

//vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path')

// https://vitejs.dev/config/
export default defineConfig({
  base: path.resolve(__dirname, './dist/'),
  plugins: [vue()]
})

Now you can run npm run build in your terminal to create the dist directory.

Setting up Electron's main.js

The next step is to create the main.js file in the root directory of the project.

Once created we just need to copy and paste the code from the Electron quick start guide.

Where we are loading index.html, we are going to change it to dist/index.html so that we are using the file in the dist directory.

So the final code in main.js is this:

//main.js
const { app, BrowserWindow } = require('electron')
const path = require('path')

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  win.loadFile('dist/index.html')
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

Create and write preload.js.

Next, let’s create a preload.js file in the project root directory and use the quick start code again, this time without modifying anything.

//preload.js
window.addEventListener('DOMContentLoaded', () => {
    const replaceText = (selector, text) => {
      const element = document.getElementById(selector)
      if (element) element.innerText = text
    }
  
    for (const type of ['chrome', 'node', 'electron']) {
      replaceText(`${type}-version`, process.versions[type])
    }
})

Modify package.json

We are almost there, there are only a few final changes we need to make to our package.json file so we can run the Electron command.

First, we need to set the main property. By default, Electron will look for the index.js file in the root directory and execute it, but since our file is named main.js, we need to define it in package.json.

//package.json
{
  "name": "vite-electron",
  "version": "0.0.0",
  "main": "main.js", // This line...
}

Then set the way to run Electron, create a new script named electron:start in the scripts section with the content electron ..

//package.json
{
  "name": "vite-electron",
  "version": "0.0.0",
  "main": "main.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "electron:start": "electron ." // here},
  ...
}

That’s all the code.

Finally, execute the command npm run electron:start in the terminal, and you can see:

The desktop program is finally completed. It’s very simple~

Final Thoughts

Recently, while improving Vue, I found a high-end Vue3+TS tutorial. Share it with the diggers for free, click me to see the tutorial

This is the end of this article about how to build a Vue3 desktop application. For more relevant Vue3 desktop application content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!