vue-electron

1.0.6 verified Sat Apr 25 auth: no javascript deprecated

vue-electron (v1.0.6, last updated 2017) is a Vue.js plugin that attaches all Electron APIs to the Vue prototype, making them accessible via `this.$electron` in any component. It eliminates the need to import `electron` in every file, simplifying integration in electron-vue boilerplate projects. The plugin is a thin wrapper that installs via `Vue.use()`. It is stable but no longer actively maintained; users are encouraged to migrate to modern approaches like `window.require('electron')` or using the `@electron/remote` package directly. Release cadence is low, with no recent updates.

Common errors

error TypeError: Cannot read property 'electron' of undefined ↓

cause Accessing this.$electron before Vue plugin is installed.

fix

Ensure Vue.use(VueElectron) is called before creating the root Vue instance.

error electron is not defined ↓

cause Trying to use vue-electron outside of Electron main/renderer process (e.g., in a browser).

fix

Only use vue-electron in Electron renderer process. Check if window.require is available.

error Uncaught Error: Cannot find module 'vue-electron' ↓

cause Missing dependency or incorrect import path.

fix

Run 'npm install vue-electron' and ensure import path is correct: 'vue-electron' not 'vue-electron/dist/...'.

Warnings

deprecated Package is no longer maintained since 2017. Use in new projects is discouraged. ↓

fix Migrate to using `window.require('electron')` or install `@electron/remote` and use `remote.require('electron')`.

gotcha Does not work with Electron >= 10 because remote module is removed. The plugin relies on `remote` which requires explicit package `@electron/remote`. ↓

fix Install @electron/remote and enable remote module via main process; then use window.require('electron') instead.

gotcha Not compatible with Vue 3 (Vue.createApp vs Vue.use pattern changed). ↓

fix Use Vue 2 or manually assign electron APIs using Vue.prototype.$electron = require('electron').

breaking Plugin does not support Electron's sandbox mode or contextIsolation: true. Accessing this.$electron may fail. ↓

fix Disable contextIsolation in BrowserWindow options or use preload script to expose electron APIs safely.

Install

npm install vue-electron

yarn add vue-electron

pnpm add vue-electron

Imports

VueElectron
wrong
```
const VueElectron = require('vue-electron')
```
correct
```
import VueElectron from 'vue-electron'
```
Package does not export a CommonJS module; works only in webpack/browserify environments. Since v1.0.0, default import is required.
$electron
wrong
```
this.$electron.remote.require('electron')
```
correct
```
this.$electron in components
```
Access via `this.$electron` in any Vue component after installing plugin. No need to import electron separately.
Vue.use
wrong
```
new VueElectron()
```
correct
```
Vue.use(VueElectron)
```
Plugin must be installed with Vue.use(), not instantiated directly.

Quickstart

This shows how to install vue-electron, then use this.$electron in a component to call Shell.openExternal.

// main.js
import Vue from 'vue'
import VueElectron from 'vue-electron'

Vue.use(VueElectron)

new Vue({
  el: '#app',
  render: h => h(App)
})

// MyComponent.vue
export default {
  methods: {
    openExternalLink(url) {
      // Access electron APIs via this.$electron
      this.$electron.shell.openExternal(url)
    }
  }
}