DEV Community

Cover image for Building a Simple Electron Application with Vue.js πŸš€πŸ”§
AMatisse
AMatisse

Posted on

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
Enter fullscreen mode Exit fullscreen mode

Now, create a new Vue project:

vue create vue-electron-app
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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();
});
Enter fullscreen mode Exit fullscreen mode

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",
  // ...
}
Enter fullscreen mode Exit fullscreen mode

5. Build and Run Your Electron Application

Build and run your Electron application using the following command:

npm run build
Enter fullscreen mode Exit fullscreen mode

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! 🌐✨

Top comments (1)

Collapse
 
dvalin99 profile image
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