Vue-Electron-Template

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!