Registry / vue-cli-plugin-electron-builder

vue-cli-plugin-electron-builder

library2.1.1jsnpmunverified

vue-cli-plugin-electron-builder is a powerful Vue CLI plugin designed to simplify the integration of Electron into Vue.js projects, enabling the creation of cross-platform desktop applications. It acts as a bridge between Vue CLI and electron-builder, handling the complex setup of Electron's main and renderer processes, including webpack configuration, hot-reloading during development, and packaging for distribution. The current stable version is 2.1.1, with a significant v3.0.0-alpha.0 release introducing updates to dependencies and a shift from Spectron to Playwright for testing. The plugin's release cadence generally aligns with major updates to Electron and Vue CLI. Key differentiators include its deep integration into the Vue CLI ecosystem, providing a familiar development experience for Vue developers, and its robust support for features like Node.js integration (configurable) and multi-page Electron applications.

npm install vue-cli-plugin-electron-builder

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-CLI-PLUGIN-ELE

vue-cli-plugin-electron-builder

javascriptv2.1.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

ElectronBuilderOptions

✓ import type { ElectronBuilderOptions } from 'vue-cli-plugin-electron-builder'

Primarily used for TypeScript type-checking when defining `electronBuilder` options within `vue.config.js` or directly configuring `electron-builder`.

NodeIntegration

✓ import type { NodeIntegration } from 'vue-cli-plugin-electron-builder'

Type import for configuring the Node.js integration setting, which is a crucial security consideration since it's disabled by default in v2.x.

backgroundProcessConfig

✓ import type { backgroundProcessConfig } from 'vue-cli-plugin-electron-builder'

Type definition for configuring specific settings related to the Electron main/background process entry points and their bundling.

This quickstart demonstrates how to install the plugin, configure essential Electron Builder options within `vue.config.js` (including critical `nodeIntegration` and builder-specific settings), and run/build the Electron application using Vue CLI commands.

// First, add the plugin to your Vue CLI project. This command will guide you through setup. // It will prompt you to choose Electron and Vue versions, and scaffold necessary files. // Terminal command: vue add electron-builder // Example vue.config.js for common plugin configuration // This file is automatically detected by Vue CLI and the plugin. module.exports = { // Other Vue CLI configurations... pluginOptions: { electronBuilder: { nodeIntegration: true, // Enable Node.js integration in the renderer process (disabled by default in v2.x) // Specify an array of files to watch in the main process for hot-reloading mainProcessWatch: ['src/background.ts'], // Configuration specifically for electron-builder builderOptions: { appId: 'com.example.my-app', productName: 'My Vue Electron Application', directories: { output: 'dist_electron' // Output directory for built executables }, win: { target: 'nsis', icon: './public/app-icon.ico' // Path to your Windows icon (ensure it exists) }, mac: { target: 'dmg', icon: './public/app-icon.icns' // Path to your macOS icon (ensure it exists) }, linux: { target: 'AppImage', icon: './public/app-icon.png' } }, // If you have a preload script, specify its path preload: 'src/preload.ts' } } }; // To run your Electron application in development mode with hot-reloading: // Terminal command: vue-cli-service electron:serve // To build your Electron application for production, creating distributable files: // Terminal command: vue-cli-service electron:build // Built artifacts will be located in the 'dist_electron' directory specified in builderOptions.

Debug

Known issues

breakingNode.js integration in renderer processes is disabled by default starting from v2.x for enhanced security. This prevents direct access to Node.js APIs (like `require` or `process`) from the renderer.

fix

To re-enable Node.js integration for your renderer processes, add `nodeIntegration: true` under `pluginOptions.electronBuilder` in your `vue.config.js`. For more secure access, consider using preload scripts to expose specific, controlled APIs.

affects: >=2.0.0-beta.0

breakingThe `testWithSpectron` function signature changed in v2.x, requiring the `spectron` module to be passed as its first argument. Additionally, Jest tests must now be configured with `testEnvironment: "node"` for compatibility.

fix

Update your testing utilities to explicitly pass `spectron` to `testWithSpectron`. Ensure your Jest configuration (e.g., `jest.config.js`) includes `testEnvironment: "node"` for tests involving Electron environments.

affects: >=2.0.0-beta.0

deprecatedThe internal `installVueDevtools` function has been removed and superseded by `electron-devtools-installer`. Continued use of the internal function is not supported.

fix

Migrate any custom Devtools installation logic to directly use the `electron-devtools-installer` package for better compatibility and feature support.

affects: >=2.0.0-rc.4

breakingThe v3 alpha release has dropped Spectron in favor of Playwright for end-to-end testing, necessitating a complete rewrite of any existing Spectron-based tests.

fix

If upgrading to v3, refactor your testing suite to utilize Playwright's Electron API. Consult Playwright's official documentation for guidance on testing Electron applications.

affects: >=3.0.0-alpha.0

gotchaVue Devtools may be disabled by default or experience compatibility issues with specific Electron versions (e.g., Electron 6.0.0) due to underlying problems.

fix

Check the plugin's GitHub issues or release notes for known Devtools compatibility problems with your Electron version. You might need to downgrade Electron or manually troubleshoot Devtools installation.

affects: >=1.4.0

gotchaStatic assets located in the `public` folder might not load correctly in some v2.x release candidates (e.g., v2.0.0-rc.2) due to an incorrect `process.env.BASE_URL` being set.

fix

Ensure you are using a stable v2.x release or a release candidate that has addressed this bug. Verify your asset paths and `vue.config.js` for any `BASE_URL` related misconfigurations.

affects: =2.0.0-rc.2

Errors

Common errors & fixes

ReferenceError: process is not defined

Node.js integration is disabled by default in Electron renderer processes since v2.x for security reasons, preventing direct access to Node.js globals.

fix

To re-enable Node.js integration, add `nodeIntegration: true` to `pluginOptions.electronBuilder` in your `vue.config.js`. For a more secure approach, use a preload script to expose specific Node.js APIs to the renderer.

TypeError: Cannot read property 'launch' of undefined (when using Spectron for tests)

In v2.x, the `testWithSpectron` utility function requires the `spectron` module itself to be passed as its first argument, a change from v1.x.

fix

Update your test calls to `testWithSpectron(require('spectron'), /* ...your args */)` or `testWithSpectron(spectron, /* ...your args */)` if `spectron` is imported.

Webpack configuration (e.g., custom loaders, plugins) not applied to Electron main process.

The plugin's Electron main process compilation is handled separately by electron-webpack, which has its own configuration scope, distinct from the renderer's webpack configuration in `vue.config.js`.

fix

For main process specific webpack adjustments, utilize options like `chainWebpackMainProcess` or `mainProcessTypeChecking` within `pluginOptions.electronBuilder` in your `vue.config.js`.

Vue Devtools extension not loading or appearing in the Electron app.

This can stem from Electron version incompatibilities (e.g., known issues with Electron 6), problems with `electron-devtools-installer`, or incorrect Devtools installation after plugin updates.

fix

Verify that your Electron version is compatible with Vue Devtools. Ensure `electron-devtools-installer` is correctly configured and that no deprecated `installVueDevtools` function is being called.

Missing static assets or broken paths in the built Electron application.

Can be due to incorrect `process.env.BASE_URL` resolution, especially in specific release candidates of v2.x, or misconfigured asset paths in `vue.config.js`.

fix

Ensure you are using a stable v2.x release. Review your `vue.config.js` for any `BASE_URL` overrides and confirm that paths to static assets are correctly specified relative to the `public` folder.

Upgrade

Version history

2.1.1latest on npm

Audit

Dependencies

electron-builderrequiredCore tool for packaging and distributing Electron applications; the plugin integrates and configures it.

electron-devtools-installerrequiredUsed for installing and managing Electron developer tools extensions, replacing internal logic since v2.0.0-rc.4.

spectronoptionalRequired as a devDependency for testing Electron applications in v2.x when using the 'testWithSpectron' utility. Superseded by Playwright in v3.x.

electronrequiredThe underlying desktop application framework that users will install as a devDependency for their project.

@vue/cli-servicerequiredAs a Vue CLI plugin, it relies on the Vue CLI service for command execution, project configuration, and webpack integration.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/nklayman/vue-cli-plugin-electron-builder ↗

packagehttps://www.npmjs.com/package/vue-cli-plugin-electron-builder ↗

homepagehttps://nklayman.github.io/vue-cli-plugin-electron-builder/ ↗