Vuejs With Electron | Advanced Vuejs

Building Desktop Apps with VueJS and Electron

Electron is a popular framework for building cross-platform desktop applications using web technologies. This guide explores how to use VueJS with Electron to build powerful desktop applications.

Key Points:

Electron combines the Chromium rendering engine and the Node.js runtime.
VueJS provides a reactive and component-based framework for building the user interface.
Using VueJS with Electron enables you to build desktop applications with a modern web development workflow.

Setting Up Electron with VueJS

To get started with Electron and VueJS, you can use the Vue CLI and the Vue CLI Plugin Electron Builder:

# Install Vue CLI globally if you haven't already
npm install -g @vue/cli

# Create a new Vue project
vue create my-vue-electron-app

# Navigate to the project directory
cd my-vue-electron-app

# Add the Electron Builder plugin
vue add electron-builder

Project Structure

After adding the Electron Builder plugin, your project structure will be updated to include Electron-specific files:

src/: Contains your VueJS application code.
public/: Contains static assets.
background.js: The main process script for Electron.
vue.config.js: Configuration file for Vue CLI and Electron Builder.

Modifying the Background Script

The background.js file is the main process script for your Electron application. You can customize it to define the main window and other Electron-specific settings:

// background.js
'use strict'

import { app, protocol, BrowserWindow } from 'electron'
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
import installExtension, { VUEJS3_DEVTOOLS } from 'electron-devtools-installer'
const isDevelopment = process.env.NODE_ENV !== 'production'

// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([{ scheme: 'app', privileges: { secure: true, standard: true } }])

async function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // Use pluginOptions.nodeIntegration, leave this alone
      // See https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION
    }
  })

  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
    if (!process.env.IS_TEST) win.webContents.openDevTools()
  } else {
    createProtocol('app')
    // Load the index.html when not in development
    win.loadURL('app://./index.html')
  }
}

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (BrowserWindow.getAllWindows().length === 0) createWindow()
})

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    try {
      await installExtension(VUEJS3_DEVTOOLS)
    } catch (e) {
      console.error('Vue Devtools failed to install:', e.toString())
    }
  }
  createWindow()
})

// Exit cleanly on request from parent process in development mode.
if (isDevelopment) {
  if (process.platform === 'win32') {
    process.on('message', (data) => {
      if (data === 'graceful-exit') {
        app.quit()
      }
    })
  } else {
    process.on('SIGTERM', () => {
      app.quit()
    })
  }
}

Running Your Application

To run your Electron application in development mode, use the following command:

# Run your application in development mode
npm run electron:serve

This command starts both the Vue development server and Electron, allowing you to see your changes live as you develop your application.

Building Your Application

To build your Electron application for production, use the following command:

# Build your Electron application for production
npm run electron:build

This command generates a packaged application for your target platform(s) in the dist_electron directory.

Using Electron APIs

Electron provides a wide range of APIs to interact with the operating system and native functionalities. You can use these APIs in your Vue components or background script:

// Using Electron APIs in a Vue component

Best Practices

Follow these best practices when building desktop applications with VueJS and Electron:

Optimize Performance: Ensure your application is optimized for performance by using lazy loading, code splitting, and other optimization techniques.
Secure Your Application: Follow security best practices to protect your application from common vulnerabilities, such as disabling node integration in the renderer process.
Test Thoroughly: Test your application on different platforms and scenarios to ensure it works as expected.
Use Electron's Native APIs: Leverage Electron's APIs to provide a native experience for your users.
Handle Updates Gracefully: Implement auto-updating mechanisms to keep your application up to date.

Summary

This guide provided an overview of building desktop applications with VueJS and Electron, including setting up Electron with VueJS, modifying the background script, running and building your application, and using Electron APIs. By leveraging the power of VueJS and Electron, you can create cross-platform desktop applications with a modern web development workflow.

VueJS - Building Desktop Apps with VueJS and Electron