https://github.com/mubaidr/vue-electron-template

An Electron & Vue.js template with Hot-reloading enabled and common Vue plugins, dev, debug and build scripts configured.
https://github.com/mubaidr/vue-electron-template

boilerplate bulma electron electron-vue electronjs rollup rollup-js starter starter-template vue webpack webpack4

Last synced: 4 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/mubaidr/vue-electron-template
• Owner: mubaidr
• License: mit
• Created: 2018-04-30T14:24:59.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2024-09-01T11:32:06.000Z (5 months ago)
• Last Synced: 2025-01-19T11:04:37.326Z (11 days ago)
• Topics: boilerplate, bulma, electron, electron-vue, electronjs, rollup, rollup-js, starter, starter-template, vue, webpack, webpack4
• Language: JavaScript
• Homepage:
• Size: 8.47 MB
• Stars: 317
• Watchers: 15
• Forks: 54
• Open Issues: 42
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        


# Vue-Electron-Template

[![Build Status](https://travis-ci.org/mubaidr/vue-electron-template.svg?branch=master)](https://travis-ci.org/mubaidr/vue-electron-template)

[![Build status](https://ci.appveyor.com/api/projects/status/cjua6pdhjp9rqa1o?svg=true)](https://ci.appveyor.com/project/mubaidr/vue-electron-template)

[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors)

Template for building desktop applications using [Electronjs](https://electronjs.org) and [Vue.js](https://vuejs.org)

## NOTICE

[Vue3 Support](https://github.com/mubaidr/vue-electron-template/issues/907)

## 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](https://mubaidr.github.io/bulma-fluent/), a theme suitable for desktop application based on [Bulma](https://bulma.io/)

- [vue-router](https://github.com/vuejs/vue-router)

- [vuex](https://github.com/vuejs/vuex)

- [vue-electron](https://github.com/SimulatedGREG/vue-electron)

- [material-design-icons](http://google.github.io/material-design-icons/) installed

- Some built-in animaitons [animations.scss](src\renderer\assets\style\animations.scss)

- `SCSS`/`SASS` support with [vue-loader](https://github.com/vuejs/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](src\utilities\workerSample.ts)

- Easily package your electron app using [electron-builder](https://github.com/electron-userland/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.

```bash

# 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](https://github.com/SimulatedGREG/electron-vue)

## Contributors

Thanks goes to these wonderful people ([emoji key](https://github.com/all-contributors/all-contributors#emoji-key)):

  

    
Jibbie R. Eguna
🎨

    
eiurur
💻

  

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!