Vue Electron Template screenshot

Vue Electron Template

Author Avatar Theme by Mubaidr
Updated: 17 Jun 2022
320 Stars

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

Categories

Overview

The Vue-Electron-Template is a template for building desktop applications using Electron.js and Vue.js. It utilizes webpack-5 with vue-loader, electron-builder, and popular plugins like vue-router and vuex. It provides an easy-to-use development environment with support for features like hot module replacement and debugging with vscode.

Features

  • Bulma-Fluent: A theme suitable for desktop applications based on Bulma.
  • vue-router: A routing library for Vue.js.
  • vuex: A state management pattern and library for Vue.js.
  • vue-electron: Integration between Vue.js and Electron.js.
  • material-design-icons: Installed for easy use of material design icons.
  • animations.scss: Built-in animations for UI elements.
  • SCSS/SASS support: Support for SCSS/SASS styles with vue-loader.
  • Typescript support: Support for using Typescript with Vue.js.
  • Worker scripts: Ability to run CPU-intensive operations using node.js child_process module.

Installation

To get started with the Vue-Electron-Template, follow these steps:

  1. Clone this repository.
  2. Install the required dependencies.
  3. Run the application using one of the provided commands: dev, debug, or build.
$ git clone [repository-url]
$ cd [repository-directory]
$ npm install
$ npm run dev     // Run in development mode
$ npm run debug   // Run with debugging enabled
$ npm run build   // Build the application

Summary

The Vue-Electron-Template is a powerful template for building desktop applications using Electron.js and Vue.js. With its wide range of features and convenient installation process, it provides developers with an efficient way to create desktop applications with modern web technologies.