Nuxt Electron

Integrate Nuxt and Electron

Features

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

Quick Setup

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

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

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

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

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

Here is the default electron options

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

Full types definition

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

import type { Configuration } from 'vite-electron-plugin'

export interface ElectronOptions extends Partial<Configuration> {
  /**
   * @see https://github.com/electron-vite/vite-plugin-electron-renderer
   */
  renderer?: Parameters<typeof import('vite-plugin-electron-renderer').default>[0]
  /**
   * nuxt-electron will modify some options by default
   * 
   * ```js
   * export default defineNuxtConfig({
   *   ssr: false,
   *   app: {
   *     baseURL: './',
   *     buildAssetsDir: '/',
   *   },
   *   runtimeConfig: {
   *     app: {
   *       baseURL: './',
   *       buildAssetsDir: '/',
   *     },
   *   },
   * })
   * ```
   */
  disableDefaultOptions?: boolean
}

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

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

atmoner / nuxt-electron