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 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

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

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

That's it! You can now use Electron in your Nuxt app ✨

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

Electron options

This is based on the vite-electron-plugin, see the Documents for more detailed options

Here is the default nuxt-electron options

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

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.1 (2023-02-18)

Main Changed

• abf84f8 fix: types error #9

PR

• @Atinux docs: update options #8