In this article, we’ll look at how to develop a Vue 3 desktop project using Vite.

The project will use Electron, one of the most popular frameworks for building cross-platform desktop applications using Javascript. As a result, many popular applications are using Electron, such as VSCode, Slack, Twitch, etc.

Here’s what to do:

Although this is just a basic template for Vite, it runs in a dedicated application rather than a browser. This is a necessary step in building your own desktop application.

Here is the development process.

Create a basic Vite program

Start by creating a Vite application. I won’t talk too much about how Vite works here.

Run the following command on the TERMINAL:

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

We’re done. Let’s try it in the browser.

Simply run the NPM run dev command from the terminal. Then open the native address in your browser and see something like this:

No problem, then it’s time to add Electron to its Settings.

Add Electron in the Vite project

Here are some adjustments for our Vite application following Electron’s official Quick start.

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

Install Electronnpm install --save-dev electron
Copy the code

Then look at the Electron manual.

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

  1. package.jsonB: We already have this one
  2. main.js
  3. preloader.js
  4. index.html

It looks like the project already has main.js and index.html files, but they are Vite files, not Electron files. Vite files can only be used to run Vite programs, so a separate Electron file will also need to be provided.

Main.js is used to create the desktop application and load it into index.html, which should also include the Vite application code we built.

Build the Vite program

So you have to build the Vite program first. There are some additional configurations that need to be done to integrate it with Electron. We want to make sure that all references to the final javascript and CSS files point to the correct path when building the project.

The Vite project to build will create the dist directory with the following structure.

But since our Electron code is in the root of the project, the base of the entire project should be set to the dist folder. You can do this through the Path library by setting the base property in the viet.config.js file.

//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()]
})
Copy the code

Now you can run NPM Run build in the terminal to create the dist directory.

Set main.js for Electron

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

Once created all we need to do is copy and paste the code from the Electron Quick Start Guide.

Where we loaded index.html, we changed it to dist/index.html to use the file in the dist directory.

So the final code in main.js looks like 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()
  }
})
Copy the code

Create and write preload.js.

Next, let’s create the preload.js file in the project root directory and use quick Start code again, this time without changing 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])
    }
})
Copy the code

Modify the package. The json

We’re almost done, but we still need to make some final changes to the package.json file to run the Electron command.

The main property is set first. By default, Electron looks for the index.js file in the root directory and executes it, but since our file is called main.js, we need to define it in package.json.

//package.json
{
  "name": "vite-electron"."version": "0.0.0"."main": "main.js"./ / this line. }Copy the code

Then set up the Electron mode and 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},... }Copy the code

That’s all the code.

Finally run the: NPM run electron:start command in the terminal and see:

Desktop program is finally complete, very simple ~

Write in the last

Recently, in the process of improving Vue, I found a high standard Vue3+TS tutorial. Free to share with diggers, poke me to see the tutorial