simulatedgreg/electron-vue

★ 15,406JavaScriptAudience · developerComplexity · 3/5Setup · moderate

Mindmap

mindmap
  root((electron-vue))
    What it does
      Desktop app boilerplate
      One-command scaffold
      Electron plus Vue wiring
    Tech stack
      Electron
      Vue.js
      webpack HMR
      Babel ES6
    Dev tooling
      ESLint linting
      Unit tests Karma Mocha
      e2e tests Spectron
      CI configs included
    Use cases
      Cross-platform desktop app
      Rapid prototyping
      Browser-compatible build

mindmap root((electron-vue)) What it does Desktop app boilerplate One-command scaffold Electron plus Vue wiring Tech stack Electron Vue.js webpack HMR Babel ES6 Dev tooling ESLint linting Unit tests Karma Mocha e2e tests Spectron CI configs included Use cases Cross-platform desktop app Rapid prototyping Browser-compatible build

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Build a cross-platform desktop app with Vue.js without manually configuring Electron and webpack from scratch.

USE CASE 2

Scaffold a new Electron+Vue project in minutes with pre-wired routing, state management, and HTTP requests.

USE CASE 3

Package a finished app into distributable installers for Windows, macOS, and Linux using electron-builder.

USE CASE 4

Set up automated CI builds for desktop apps using the included SemaphoreCI, AppVeyor, and Travis config files.

Tech stack

JavaScriptElectronVue.jswebpackBabelESLintKarmaMocha

Getting it running

Difficulty · moderate Time to first run · 30min

Requires Node 7 or higher and yarn as the package manager.

In plain English

electron-vue is a starter template, what developers call a "boilerplate", for building desktop applications that combine Electron and Vue.js. Electron is the framework behind apps like Slack or VS Code that wraps a web app in a window so it can run on Windows, macOS, and Linux. Vue.js is a JavaScript framework for building the user interface. Wiring the two together by hand involves a lot of configuration, this project removes that step by giving you a working project skeleton you can scaffold in one command. Under the hood, the boilerplate uses vue-cli for scaffolding and ships with webpack and vue-loader (with Hot Module Replacement, so changes show up live), Babel for ES6 support, and either electron-packager or electron-builder to bundle your finished app into installers. Common Vue plugins are pre-wired in, including axios for HTTP requests, vue-electron, vue-router for in-app navigation, and vuex for state management. Development tooling includes vue-devtools and devtron, ESLint with standard or airbnb-base style, unit tests with Karma and Mocha, and end-to-end tests with Spectron and Mocha. Configuration files for SemaphoreCI, AppVeyor, and Travis are included for automated builds, and the same code can also be built for the browser. Choices like which test runner, linter, and packager to use are picked interactively when you scaffold the project. You would reach for electron-vue if you want to build a cross-platform desktop app and prefer Vue over React, and you would rather start from a working setup than configure Electron, webpack, and Vue yourself. Node 7 or higher is required, and yarn is the recommended package manager.

Copy-paste prompts

Prompt 1

Using electron-vue as my boilerplate, generate a desktop app shell with a sidebar nav using Vue Router and a Vuex store for user settings.

Prompt 2

Help me add an SQLite database to an electron-vue project to persist data between app sessions.

Prompt 3

Write an electron-vue component that reads files from the user's local filesystem and displays them in a list.

Prompt 4

Show me how to package my electron-vue app for Windows and macOS using electron-builder with code signing.

Prompt 5

Set up a Vuex module in electron-vue to sync state between the main Electron process and the renderer process.

Open on GitHub → Explain another repo

← simulatedgreg on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.