mubaidr/vue-electron-template

README

Vue-Electron-Template

🚀 Vue 3 Support: See Issue #907

Template for building desktop applications using Electron and Vue.js with modern tooling.

✨ Features

Modern UI: Bulma-Fluent theme
Vue Ecosystem: Vue Router, Vuex, Vue 2 support
TypeScript: Full TypeScript support
Build Tools: Webpack 5, electron-builder
Developer Experience:
- Hot Module Replacement
- VS Code debugging
- vue-devtools integrated
Advanced Features:
- Worker scripts for CPU-intensive tasks
- SCSS/SASS support
- Production build with --debug flag
- Web/browser build in dist/web

🚀 Quick Start

# Clone repository
git clone https://github.com/mubaidr/vue-electron-template.git

# Navigate to project
cd vue-electron-template

# Install dependencies
npm install

# Development mode
npm run dev

# Debug mode (with VS Code)
npm run debug

# Build installer
npm run build

📦 Scripts

Command	Description
`npm run dev`	Start development with HMR
`npm run debug`	Debug mode with VS Code
`npm run build`	Build production installer
`npm run lint`	Run ESLint

📁 Project Structure

src/
├── main/           # Electron main process
│   └── index.js    # Main entry point
├── renderer/       # Vue.js application
│   ├── components/ # Vue components
│   ├── views/      # Page views
│   └── store/      # Vuex store
└── utilities/
    └── workerSample.ts  # Sample worker script

🛠️ Configuration

Database

Default: SQL Server

To switch databases, update Sequelize configuration: Sequelize Installation Guide

Theme

Built-in Bulma-Fluent theme for desktop applications.

🐛 Debugging

Renderer Process: Use VS Code debug config
Main Process: Restart on save
Production: Add --debug flag to enable DevTools

📄 License

MIT

👥 Credits

All credits to authors of packages and tools used in this project.

This template is inspired by electron-vue.

⭐ If you find this useful, star the repository!