Integrate Nuxt and Electron
electron
module to projectnpx nuxi module add electron
# Using pnpm
pnpm add -D vite-plugin-electron vite-plugin-electron-renderer electron electron-builder
# Using yarn
yarn add --dev vite-plugin-electron vite-plugin-electron-renderer electron electron-builder
# Using npm
npm install --save-dev vite-plugin-electron vite-plugin-electron-renderer electron electron-builder
electron
and related config to nuxt.config.ts
export default defineNuxtConfig({
...
electron: {
build: [
{
// Main-Process entry file of the Electron App.
entry: 'electron/main.ts',
},
],
},
ssr: false, // #43
...
})
electron/main.ts
file and type the following codeimport { app, BrowserWindow } from 'electron'
app.whenReady().then(() => {
new BrowserWindow().loadURL(process.env.VITE_DEV_SERVER_URL)
})
main
entry to package.json
{
+ "main": "dist-electron/main.js"
}
That's it! You can now use Electron in your Nuxt app ✨
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: './,
* }
* }
* },
router: {
options: {
hashMode: true,
}
}
* })
* ```
*/
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
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