Awesome

Vue-Electron-Template

Template for building desktop applications using Electronjs and Vue.js

NOTICE

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):

<table> <tr> <td align="center"><a href="https://github.com/jbeguna04"><img src="https://avatars3.githubusercontent.com/u/35353768?v=4" width="100px;" alt=""/> Jibbie R. Eguna</a> <a href="#design-jbeguna04" title="Design">🎨</a></td> <td align="center"><a href="https://github.com/eiurur"><img src="https://avatars0.githubusercontent.com/u/4101830?v=4" width="100px;" alt=""/> eiurur</a> <a href="https://github.com/mubaidr/vue-electron-template/commits?author=eiurur" title="Code">💻</a></td> </tr> </table>

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