Integrate Nuxt and Electron
- ๐ High-performance (Not Bundle, based on esbuild)
- ๐ฆ Out of the box
- ๐ฅ Hot restart
- 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
- 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 โจ
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',
},
})
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
By default, we force the App to run in SPA mode since we don't need SSR for desktop apps