electron-vite-vue/README.md

# 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](https://github.com/electron-vite/electron-vite-vue/actions/workflows/build.yml/badge.svg)](https://github.com/electron-vite/electron-vite-vue/actions/workflows/build.yml)

## Features

📦 Out of the box  
🎯 Based on the official [template-vue-ts](https://github.com/vitejs/vite/tree/main/packages/create-vite/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 Start

```sh
npm create electron-vite
```

<!-- [![quick-start](https://asciinema.org/a/483731.svg)](https://asciinema.org/a/483731) -->

![electron-vite-vue.gif](https://github.com/electron-vite/electron-vite-vue/blob/main/public/electron-vite-vue.gif?raw=true)

## Debug

![electron-vite-react-debug.gif](https://github.com/electron-vite/electron-vite-react/blob/main/public/electron-vite-react-debug.gif?raw=true)

## Directory

```diff
+ ├─┬ 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/tree/main/packages/electron-renderer#config-presets-opinionated).

```diff
# vite.config.ts

electron({
- renderer: {}
})
```

## FAQ

- [dependencies vs devDependencies](https://github.com/electron-vite/vite-plugin-electron/tree/main/packages/electron-renderer#dependencies-vs-devdependencies)
- [Using C/C++ native addons in Electron-Renderer](https://github.com/electron-vite/vite-plugin-electron/tree/main/packages/electron-renderer#load-nodejs-cc-native-modules)
- [Node.js ESM packages](https://github.com/electron-vite/vite-plugin-electron/tree/main/packages/electron-renderer#nodejs-esm-packages) (e.g. `execa` `node-fetch`)
fix: typo 2022-03-29 18:02:21 +08:00			`# electron-vite-vue`
chore: Github badges 2021-11-04 14:28:22 +08:00
docs: update 2022-06-17 09:01:16 +08:00			🥳 Really simple `Electron` + `Vue` + `Vite` boilerplate.

docs: update 2022-03-05 06:36:45 +08:00			`[![awesome-vite](https://awesome.re/mentioned-badge.svg)](https://github.com/vitejs/awesome-vite)`
misc: fix ci & add doc links 2022-04-20 00:18:29 +08:00			`[![Netlify Status](https://api.netlify.com/api/v1/badges/ae3863e3-1aec-4eb1-8f9f-1890af56929d/deploy-status)](https://app.netlify.com/sites/electron-vite/deploys)`
docs: update 2022-08-16 08:12:18 +08:00			`[![GitHub license](https://img.shields.io/github/license/caoxiemeihao/electron-vite-vue)](https://github.com/electron-vite/electron-vite-vue/blob/main/LICENSE)`
docs: update 2022-08-16 08:15:36 +08:00			`[![GitHub stars](https://img.shields.io/github/stars/caoxiemeihao/electron-vite-vue?color=fa6470)](https://github.com/electron-vite/electron-vite-vue)`
docs: update 2022-08-16 08:12:18 +08:00			`[![GitHub forks](https://img.shields.io/github/forks/caoxiemeihao/electron-vite-vue)](https://github.com/electron-vite/electron-vite-vue)`
docs: add build badge 2022-07-27 18:45:22 +08:00			`[![GitHub Build](https://github.com/electron-vite/electron-vite-vue/actions/workflows/build.yml/badge.svg)](https://github.com/electron-vite/electron-vite-vue/actions/workflows/build.yml)`
chore(docs): UPDATE 2021-11-12 08:35:08 +08:00
docs: update 2022-06-17 09:01:16 +08:00			`## Features`
docs: update 2022-04-26 09:19:55 +08:00
			`📦 Out of the box`
Update README.md 2022-08-03 08:18:24 +08:00			`🎯 Based on the official [template-vue-ts](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-vue-ts), less invasive`
docs: update 2022-06-17 09:01:16 +08:00			`🌱 Extensible, really simple directory structure`
docs: `dependencies` vs `devDependencies` 2022-06-28 10:25:37 +08:00			`💪 Support using Node.js API in Electron-Renderer`
docs: v2.0.0 2022-06-16 19:35:21 +08:00			`🔩 Support C/C++ native addons`
docs: update 2022-04-26 09:19:55 +08:00			`🖥 It's easy to implement multiple windows`

docs(readme): add quick-start preview 2022-03-03 20:04:55 +08:00			`## Quick Start`
chore(docs): UPDATE 2021-11-02 15:06:09 +08:00
docs: update 2022-04-26 09:19:55 +08:00			```sh
			`npm create electron-vite`
			```
docs: update 2022-03-23 20:03:44 +08:00
docs: update 2022-04-26 09:19:55 +08:00			`<!-- [![quick-start](https://asciinema.org/a/483731.svg)](https://asciinema.org/a/483731) -->`
docs: update 2022-03-05 06:36:45 +08:00
docs: v2.0.0 2022-06-16 19:35:21 +08:00			`![electron-vite-vue.gif](https://github.com/electron-vite/electron-vite-vue/blob/main/public/electron-vite-vue.gif?raw=true)`
docs: update 2022-03-05 06:36:45 +08:00
docs: update 2022-04-26 09:19:55 +08:00			`## Debug`
docs: update 2022-03-05 06:36:45 +08:00
docs: v2.0.0 2022-06-16 19:35:21 +08:00			`![electron-vite-react-debug.gif](https://github.com/electron-vite/electron-vite-react/blob/main/public/electron-vite-react-debug.gif?raw=true)`
docs: update 2022-03-05 06:36:45 +08:00
chore(docs): UPDATE 2021-11-11 18:29:18 +08:00			`## Directory`

docs: v2.0.0 2022-06-16 19:35:21 +08:00			```diff
			`+ ├─┬ electron`
			`+ │ ├─┬ main`
docs: update 2022-07-20 08:47:41 +08:00			`+ │ │ └── index.ts entry of Electron-Main`
docs: v2.0.0 2022-06-16 19:35:21 +08:00			`+ │ └─┬ preload`
docs: update 2022-07-20 08:47:41 +08:00			`+ │ └── index.ts entry of Preload-Scripts`
docs: v2.0.0 2022-06-16 19:35:21 +08:00			`├─┬ src`
docs: update 2022-07-20 08:47:41 +08:00			`│ └── main.ts entry of Electron-Renderer`
docs: v2.0.0 2022-06-16 19:35:21 +08:00			`├── index.html`
			`├── package.json`
			`└── vite.config.ts`
chore(docs): UPDATE 2021-11-11 18:29:18 +08:00			```

Update README.md 2022-08-11 08:58:59 +08:00			`## Be aware`
feat(nodeIntegration): set nodeIntegration as true by default 2022-03-13 21:52:58 +08:00
Update README.md 2022-08-11 08:58:59 +08:00			`🚨 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/tree/main/packages/electron-renderer#config-presets-opinionated).`
feat(nodeIntegration): set nodeIntegration as true by default 2022-03-13 21:52:58 +08:00
docs: update 2022-07-20 08:47:41 +08:00			```diff
			`# vite.config.ts`
docs: `dependencies` vs `devDependencies` 2022-06-28 10:25:37 +08:00
docs: update 2022-07-20 08:47:41 +08:00			`electron({`
			`- renderer: {}`
			`})`
			```
docs: `dependencies` vs `devDependencies` 2022-06-28 10:25:37 +08:00
docs: update 2022-07-20 08:47:41 +08:00			`## FAQ`
chore(docs): use Electron, NodeJs API in Renderer-process 2021-12-18 09:44:36 +08:00
docs: update 2022-07-20 08:47:41 +08:00			`- [dependencies vs devDependencies](https://github.com/electron-vite/vite-plugin-electron/tree/main/packages/electron-renderer#dependencies-vs-devdependencies)`
			`- [Using C/C++ native addons in Electron-Renderer](https://github.com/electron-vite/vite-plugin-electron/tree/main/packages/electron-renderer#load-nodejs-cc-native-modules)`
			- [Node.js ESM packages](https://github.com/electron-vite/vite-plugin-electron/tree/main/packages/electron-renderer#nodejs-esm-packages) (e.g. `execa` `node-fetch`)