Building a Simple Electron Application with Vue.js 🚀🔧

Building a Simple Electron Application with Vue.js 🚀🔧

Electron allows developers to build cross-platform desktop applications using web technologies. In this tutorial, we'll walk through the steps of creating a basic Electron application with the Vue.js framework. By the end, you'll have a solid foundation for developing desktop applications that leverage the power of Vue.js.

1. Initialize Your Vue.js Project

Start by creating a new Vue.js project using the Vue CLI. If you haven't installed the CLI yet, you can do so with the following command:

npm install -g @vue/cli

Now, create a new Vue project:

vue create vue-electron-app

Follow the prompts to configure your project.

2. Install Electron in Your Project

Navigate into your Vue project directory and install Electron as a development dependency:

cd vue-electron-app
npm install --save-dev electron

3. Create the Electron Main File

Create a file named main.js in the root of your project. This file will serve as the entry point for Electron:

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

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  });

  mainWindow.loadFile('dist/index.html'); // Adjust the path based on your build directory

  mainWindow.on('closed', function () {
    mainWindow = null;
  });
}

app.whenReady().then(createWindow);

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

app.on('activate', function () {
  if (mainWindow === null) createWindow();
});

4. Update Your Vue Project Configuration

Modify your package.json to include Electron-specific scripts and configure the build directory:

// package.json
{
  // ...
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build && electron .",
    // Add other scripts as needed
  },
  "main": "main.js",
  // ...
}

5. Build and Run Your Electron Application

Build and run your Electron application using the following command:

npm run build

This will build your Vue.js project and launch the Electron application.

Conclusion: Vue.js + Electron = Desktop Magic 🚀🔧

Congratulations! You've successfully built a simple Electron application with Vue.js. This combination opens up exciting possibilities for creating desktop applications with the familiar Vue.js framework. Explore further, add features, and tailor your application to meet your desktop development needs. Happy coding with Vue.js and Electron! 🌐✨

Comments

[Domenico Tenace]

Nice article, thanks 🙏🏼
I have a question: why use Vue Cli instead a solution based on Vite?
Vue Cli is not recommended because it's in maintenance mode

[Tegar Swasono]

I have followed your article and got this error, can help me please?

[王青山]

the js file load is error,you can try to add publicPath: './' in vue.config.js