Home

Awesome

electron-vite-vue

šŸ„³ Really simple Electron + Vue + Vite boilerplate.

<!-- [![awesome-vite](https://awesome.re/mentioned-badge.svg)](https://github.com/vitejs/awesome-vite) --> <!-- [![Netlify Status](https://api.netlify.com/api/v1/badges/ae3863e3-1aec-4eb1-8f9f-1890af56929d/deploy-status)](https://app.netlify.com/sites/electron-vite/deploys) --> <!-- [![GitHub license](https://img.shields.io/github/license/caoxiemeihao/electron-vite-vue)](https://github.com/electron-vite/electron-vite-vue/blob/main/LICENSE) --> <!-- [![GitHub stars](https://img.shields.io/github/stars/caoxiemeihao/electron-vite-vue?color=fa6470)](https://github.com/electron-vite/electron-vite-vue) --> <!-- [![GitHub forks](https://img.shields.io/github/forks/caoxiemeihao/electron-vite-vue)](https://github.com/electron-vite/electron-vite-vue) -->

GitHub Build GitHub Discord

Features

šŸ“¦ Out of the box
šŸŽÆ Based on the official template-vue-ts, less invasive
šŸŒ± Extensible, really simple directory structure
šŸ’Ŗ Support using Node.js API in Electron-Renderer
šŸ”© Support C/C++ native addons
šŸ–„ It's easy to implement multiple windows

Quick Setup

# clone the project
git clone https://github.com/electron-vite/electron-vite-vue.git

# enter the project directory
cd electron-vite-vue

# install dependency
npm install

# develop
npm run dev

Debug

electron-vite-react-debug.gif

Directory

+ ā”œā”€ā”¬ electron
+ ā”‚ ā”œā”€ā”¬ main
+ ā”‚ ā”‚ ā””ā”€ā”€ index.ts    entry of Electron-Main
+ ā”‚ ā””ā”€ā”¬ preload
+ ā”‚   ā””ā”€ā”€ index.ts    entry of Preload-Scripts
  ā”œā”€ā”¬ src
  ā”‚ ā””ā”€ā”€ main.ts       entry of Electron-Renderer
  ā”œā”€ā”€ index.html
  ā”œā”€ā”€ package.json
  ā””ā”€ā”€ vite.config.ts
<!-- ## Be aware šŸšØ By default, this template integrates Node.js in the Renderer process. If you don't need it, you just remove the option below. [Because it will modify the default config of Vite](https://github.com/electron-vite/vite-plugin-electron-renderer#config-presets-opinionated). ```diff # vite.config.ts export default { plugins: [ - // Use Node.js API in the Renderer-process - renderer({ - nodeIntegration: true, - }), ], } ``` -->

FAQ