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 pnpmpnpm add -D nuxt-electron vite-electron-plugin vite-plugin-electron-renderer electron electron-builder# Using yarnyarn add --dev nuxt-electron vite-electron-plugin vite-plugin-electron-renderer electron electron-builder# Using npmnpm install --save-dev nuxt-electron vite-electron-plugin vite-plugin-electron-renderer electron electron-builder
- Add
nuxt-electron
to themodules
section ofnuxt.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 topackage.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