/vue-electron-template

An Electron & Vue.js template with Hot-reloading enabled and common Vue plugins, dev, debug and build scripts configured.

Primary LanguageJavaScriptMIT LicenseMIT

Vue-Electron-Template

Build Status Build status All Contributors

Template for building desktop applications using Electronjs and Vue.js

NOTICE

Vue3 Support

Overview

This template takes advantage of webpack-5 with vue-loader, electron-builder, and some of the most used plugins like vue-router, vuex and so much more to provide an easy to use development (with vscode debugging) enviroment with hot module replacement.

Features

  • Bulma-Fluent, a theme suitable for desktop application based on Bulma
  • vue-router
  • vuex
  • vue-electron
  • material-design-icons installed
  • Some built-in animaitons animations.scss
  • SCSS/SASS support with vue-loader (removes unused css/styles during build)
  • Typescript support (for Vuejs as well)
  • Worker scripts (to perform CPU-intensive operations), to use with nodejs child_process module. Sample Worker File
  • Easily package your electron app using electron-builder
  • vue-devtools installed
  • DEV, DEBUG & BUILD NPM scripts
  • Babel configured
  • ESLint configured
  • vscode debug config for renderer process debugging
  • Process restarting when working in main process & hot module replacement for renderer
  • Generates web/browser build in the dist/web directory too
  • --debug paramter to enable dev tools in production build executeable

Screenshot

Getting Started

Clone this repository, install dependencies and run using either dev, debug or build command.

# Clone this repository
git clone https://github.com/mubaidr/vue-electron

# change directory to cloned path
cd vue-electron

# Install dependencies
npm install

# Run in `debug` mode, to debug app using VSCODE
npm run debug

# Run in `dev` mode
npm run dev

# Build installer for this app
npm run build

Project structure

src/main contains electron main script.

src/renderer contains vue-js application.

src/utilities/workerSample.ts a sample worker script.

Credits

All credits to authors of packages and tools used in the project.

* This template is inspired by electron-vue

Contributors

Thanks goes to these wonderful people (emoji key):


Jibbie R. Eguna

🎨

eiurur

💻

This project follows the all-contributors specification. Contributions of any kind welcome!