https://github.com/caoxiemeihao/nuxt-electron
Integrate Nuxt and Electron
https://github.com/caoxiemeihao/nuxt-electron
Last synced: 6 months ago
JSON representation
Integrate Nuxt and Electron
- Host: GitHub
- URL: https://github.com/caoxiemeihao/nuxt-electron
- Owner: caoxiemeihao
- License: mit
- Created: 2022-11-10T03:23:06.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2025-01-20T02:08:57.000Z (10 months ago)
- Last Synced: 2025-05-12T06:07:10.121Z (6 months ago)
- Language: TypeScript
- Homepage:
- Size: 1020 KB
- Stars: 203
- Watchers: 3
- Forks: 22
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-nuxt - Nuxt Electron
README
# Nuxt Electron
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
[
](https://api.gitsponsors.com/api/badge/link?p=Mz9rvcT08fgHJXo5KS+hQ96a91PyIlbKcr11rzON3xux6OXDlmkpEtfDd/XpYlsw)
> Integrate Nuxt and Electron
## Features
- 📦 Out of the box
- 🔥 Hot restart (Main process)
- 🚀 Hot reload (Preload script)
## Quick Setup
1. Add `electron` module to project
```sh
npx nuxi module add electron
```
2. Add the following dependency to your project
```sh
# Using pnpm
pnpm add -D vite-plugin-electron vite-plugin-electron-renderer electron electron-builder
# Using yarn
yarn add --dev vite-plugin-electron vite-plugin-electron-renderer electron electron-builder
# Using npm
npm install --save-dev vite-plugin-electron vite-plugin-electron-renderer electron electron-builder
```
3. Add `electron` and related config to `nuxt.config.ts`
```ts
export default defineNuxtConfig({
...
electron: {
build: [
{
// Main-Process entry file of the Electron App.
entry: 'electron/main.ts',
},
],
},
ssr: false, // #43
...
})
```
4. Create the `electron/main.ts` file and type the following code
```ts
import { app, BrowserWindow } from 'electron'
app.whenReady().then(() => {
new BrowserWindow().loadURL(process.env.VITE_DEV_SERVER_URL)
})
```
5. Add the `main` entry to `package.json`
```diff
{
+ "main": "dist-electron/main.js"
}
```
That's it! You can now use Electron in your Nuxt app ✨
## Electron Options
> This is based on the `vite-plugin-electron`, see the **[Documents](https://github.com/electron-vite/vite-plugin-electron)** for more detailed options
```ts
export interface ElectronOptions {
/**
* `build` can specify multiple entry builds, which can be Main process, Preload scripts, Worker process, etc.
*
* @example
*
* ```js
* export default defineNuxtConfig({
* modules: ['nuxt-electron'],
* electron: {
* build: [
* {
* // Main-Process entry file of the Electron App.
* entry: 'electron/main.ts',
* },
* ],
* },
* })
* ```
*/
build: import('vite-plugin-electron').ElectronOptions[],
/**
* @see https://github.com/electron-vite/vite-plugin-electron-renderer
*/
renderer?: Parameters[0]
/**
* nuxt-electron will modify some options by default
*
* @defaultValue
*
* ```js
* export default defineNuxtConfig({
* ssr: false,
* app: {
* baseURL: './',
* buildAssetsDir: '/',
* },
* runtimeConfig: {
* app: {
* baseURL: './',
* buildAssetsDir: '/',
* },
* },
* nitro: {
* runtimeConfig: {
* app: {
* baseURL: './,
* }
* }
* },
router: {
options: {
hashMode: true,
}
}
* })
* ```
*/
disableDefaultOptions?: boolean
}
```
## Recommend Structure
Let's use the official [nuxt-starter-v3](https://codeload.github.com/nuxt/starter/tar.gz/refs/heads/v3) template as an example
```diff
+ ├─┬ electron
+ │ └── main.ts
├─┬ public
│ └── favicon.ico
├── .gitignore
├── .npmrc
├── index.html
├── app.vue
├── nuxt.config.ts
├── package.json
├── README.md
└── tsconfig.json
```
## Examples
- [quick-start](https://github.com/caoxiemeihao/nuxt-electron/tree/main/quick-start)
- [nuxt-electron-trpc-prisma](https://github.com/gurvancampion/nuxt-electron-trpc-prisma)
## Notes
By default, we force the App to run in SPA mode since we don't need SSR for desktop apps
If you want to fully customize the default behavior, you can disable it by `disableDefaultOptions`
[npm-version-src]: https://img.shields.io/npm/v/nuxt-electron/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-version-href]: https://npmjs.com/package/nuxt-electron
[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-electron.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-downloads-href]: https://npmjs.com/package/nuxt-electron
[license-src]: https://img.shields.io/npm/l/nuxt-electron.svg?style=flat&colorA=18181B&colorB=28CF8D
[license-href]: https://npmjs.com/package/nuxt-electron
## TODO
- [ ] write test