From Organic Design wiki

This page is for my notes on using electron with vue.
Electron Docs.


Electron CLI

sudo npm i -g electron # install electron globally.

If you get an error about not being able to create a folder, you can force it with

sudo npm i -g electron --unsafe-perm=true --allow-root

Electron Forge CLI

I recomend using electron forge.

sudo npm install -g electron-forge # install electron-forge globally.

Again if it errors you can force with

sudo npm install -g electron-forge --unsafe-perm=true --allow-root # install electron-forge globally.

Create Vue Project

electron-forge init my-new-project --template=vue
cd my-new-project
electron-forge start # Or npm run start


I recommend creating and modifying the following files:


<!DOCTYPE html>

<html lang="en-US">
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<div id="app"></div>

	<script src="main.js"></script>


import Vue from "vue";
import App from "./App";

/* eslint-disable no-new */
new Vue({
	el: "#app",
	render: h => h(App)


  <h2>Hello from {{text}}</h2>

export default {
	data () {
		return {
			text: "Vue!"


I would also recommend creating the following folders to keep a nice vue project structure:

  • components
  • pages

And if you are going to use vuex and/or vue router:

  • router
  • store

Integration With Existing Apps

More to come...