nuxt-electron

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 vite-plugin-electron-renderer electron electron-builder

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

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

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

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

1. 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)
})

1. 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',
  },
})

Use Node.js in Renderer process

export default defineNuxtConfig({
  modules: [
    'nuxt-electron',
  ],
  electron: {
    /**
     * @see https://github.com/electron-vite/vite-plugin-electron-renderer
     */
    renderer: {},
  },
})

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

Changelog

0.4.2 (2023-03-12)

Main Changed

c0a9c54 feat: support use Node.js in Renderer process #14