electron-vite/electron-vite-vue

πŸ₯³ Really simple Electron + Vite + Vue boilerplate.

TypeScript

4,893

726 commits

updated Sep 1, 2026

See the code

README

electron-vite-vue

πŸ₯³ Really simple Electron + Vue + Vite boilerplate.

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

Security Note

The renderer: {} preset in vite.config.ts is only a Vite adapter that polyfills Electron, Node.js APIs and native modules for the renderer process. It is not the same as enabling Node integration. If you want direct Node.js access in the renderer, enable nodeIntegration in the BrowserWindow webPreferences in the main process and review the security impact carefully.

FAQ

electron
rollup
typescript
vite
vue

electron-vite/electron-vite-vue

πŸ₯³ Really simple Electron + Vite + Vue boilerplate.

TypeScript

4,893

726 commits

updated Sep 1, 2026

See the code

README

electron-vite-vue

πŸ₯³ Really simple Electron + Vue + Vite boilerplate.

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

Security Note

The renderer: {} preset in vite.config.ts is only a Vite adapter that polyfills Electron, Node.js APIs and native modules for the renderer process. It is not the same as enabling Node integration. If you want direct Node.js access in the renderer, enable nodeIntegration in the BrowserWindow webPreferences in the main process and review the security impact carefully.

FAQ

electron
rollup
typescript
vite
vue

Significant stargazers

云游君

5,163 followers Β· starred Mar 2022

Khaidi Chu

3,928 followers Β· starred Jun 2022

Joe Fleming

154 followers Β· starred Dec 2022

yoho

150 followers Β· starred Oct 2023