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!