Template for building desktop applications using Electronjs and Vue.js
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.
- 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 (forVuejs
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
installedDEV
,DEBUG
&BUILD
NPM scriptsBabel
configuredESLint
configuredvscode
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
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
src/main
contains electron main script.
src/renderer
contains vue-js application.
src/utilities/workerSample.ts
a sample worker script.
All credits to authors of packages and tools used in the project.
* This template is inspired by electron-vue