How to use Vue + Vite on Electron

Hello, developer! Interested in making an application with Electron, and using Vue in it instead of pure HTML? Come with me and I’ll help you out!

Vue + Vite on Electron

Electron is one of the most popular frameworks for building cross-platform desktop apps with JavaScript. So many popular apps are using Electron. A special example is Visual Studio Code.

There are some tutorials on the same subject here on the internet, but they are out of date and don’t even fix most of the problems caused by old and outdated examples. I’m here to bring you a definitive solution (until things change again) and help anyone who wants to make their own app in Electron and Vue.

---

Introduction

First of all, make sure you have Node.js installed.

You can use the node --version and npm --version commands to check if it’s really installed.

$ npm --version
10.8.1
$ node --version
v22.3.0

If not, you can visit its website (nodejs.org) to download and install it.

---

Creating the Vite project

First, let’s make our Vite app. If you want to learn more about creating your Vue project in Vite, there is a plenty of tutorials on YouTube.

But basically, let’s go to our terminal and run the commands below ([project-name] is the name of the project that you have created):

$ npm create vite@latest
$ cd [project-name]
$ npm install

Now, you can test your project on the browser via the good old npm run dev command.

This is the Vite template on the browser:

Vue + Vite on Browser

---

Creating and the Electron app

For now, we will be following the Electron’s own quick start guide from the official documentation, but tweaking it a little bit to work inside our Vite project.

The first thing we have to do is actually install Electron, so let’s head over to the terminal and do that.

$ npm install --save-dev electron

The Electron guide says that a simple Electron app needs four main files, but here we will only use two of them, as one is already been created by Vite and the other is unnecessary for the project.

The files that we need here are:

• package.json (we already have that)
• index.html (we already have that too)
• main.js

---

Setting up our Vue + Vite + Electron app

The next step is to create our main.js file in our root directory. Once it’s created, we can just copy and paste the code from the Electron quick start guide, but there is one change that we have to make though.

On the part that “says” to Electron where to load our index.html file, we will have to change that path to ./dist/index.html, so we are using the file that Vite builded inside our dist folder. Also, we can remove the part that loads the preload.js file, as for now we won’t need of that.

The final code of main.js will be something like that:

const { app, BrowserWindow } = require("electron");
const path = require("path");

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
  });

  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();
  }
});

Now, we will need to modify our package.json file, removing the "type": "module" part of the file, also adding "description" and "author" sections, as this will be needed when building.

Also, you will need to add some things in the "scripts" section to make the commands to load our Electron project.

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "start": "electron .",
    "test": "vite build && electron ."
  },
}

Here is my personal tip: you can run npm test to compile the Vite app and run Electron with the files provided by Vite at the same time.

Your final package.json will look like this:

{
  "name": "vite-electron",
  "private": true,
  "version": "0.0.0",
  "description": "The example code for a tutorial on my blog",
  "main": "main.js",
  "author": "Lucas Gabriel (lucmsilva)",
  "license": "BSD-3-Clause",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "start": "electron .",
    "test": "vite build && electron ."
  },
  "dependencies": {
    "vue": "^3.4.29"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.5",
    "electron": "^31.1.0",
    "vite": "^5.3.1"
  }
}

Note: I have modified my license on the example JSON because I prefer to use BSD-3 instead of MIT. But you can stick with MIT, as you may have different license requirements than me.

Finally, we will need to modify the vite.config.js (or vite.config.ts if you are using TypeScript) a little bit to specify the build directory to /dist and make the exported HTML file use relative paths instead of fixed ones.

There is the vite.config.js file with all changes already made, just copy, paste and enjoy!

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

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

---

Testing the app

Now, you can test the app using vite build to make the files from Vite and npm start to run the Electron app. It should work like magic.

Vue + Vite on Electron

Note: to make the Vue logo appear on the project, you will need to move the vue.svg file located in /src/assets to /public and change the App.vue to point the SVG to /vue.svg instead of ./assets/vue.svg.

---

Outro

And that’s it! I hope that this tutorial helped you. You can see the final files on my GitHub.

Also, here are the repository link with the final files: https://github.com/lucmsilva651/vite-electron