Nuxt Electron

Integrate Nuxt and Electron

Features

• 🚀 High-performance _{^{(Not Bundle, based on esbuild)}}
• 📦 Out of the box
• 🔥 Hot restart

Quick Setup

1. Add the following dependency to your project

# Using pnpm
pnpm add -D nuxt-electron vite-electron-plugin electron electron-builder

# Using yarn
yarn add --dev nuxt-electron vite-electron-plugin electron electron-builder

# Using npm
npm install --save-dev nuxt-electron vite-electron-plugin electron electron-builder

2. Add nuxt-electron to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    'nuxt-electron',
  ],
})

3. Create the electron/main.ts file and type the following code

import { app, BrowserWindow } from 'electron'

app.whenReady().then(() => {
  new BrowserWindow().loadURL(process.env.VITE_DEV_SERVER_URL)
})

4. Add the main entry to package.json

{
+ "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-electron-plugin, see the Documents for more detailed options

Here is the default electron options

export default defineNuxtConfig({
  modules: [
    'nuxt-electron',
  ],
  electron: {
    include: ['electron'],
    outDir: 'dist-electron',
  },
})

Recommend Structure

Let's use the official nuxt-starter-v3 template as an example

+ ├─┬ electron
+ │ └── main.ts
  ├─┬ public
  │ └── favicon.ico
  ├── .gitignore
  ├── .npmrc
  ├── index.html
  ├── app.vue
  ├── nuxt.config.ts
  ├── package.json
  ├── README.md
  └── tsconfig.json

Examples

• quick-start
• 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