Nuxt Electron

Integrate Nuxt and Electron

Features

📦 Out of the box
🔥 Hot restart _{^{(Main process)}}
🚀 Hot reload _{^{(Preload script)}}

Quick Setup

Add the following dependency to your project

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

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

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

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

export default defineNuxtConfig({
  modules: ['nuxt-electron'],
  electron: {
    build: [
      {
        // Main-Process entry file of the Electron App.
        entry: 'electron/main.ts',
      },
    ],
  },
})

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

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

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<typeof import('vite-plugin-electron-renderer').default>[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: './,
   *       }
  *      }
   *   },
   * })
   * ```
   */
  disableDefaultOptions?: boolean
}

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