Not working with Nuxt3

I am trying to use this plugin with nuxt 3 but can’t make it work so far. I have the following nuxt.config.ts

import { rmSync } from "fs";
import electron from "vite-electron-plugin";
import renderer from "vite-plugin-electron-renderer";

rmSync("dist-electron", { recursive: true, force: true });

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  ssr: false,
  vite: {
    plugins: [
      electron({
        include: ["electron"],
      }),
      // Use Node.js API in the Renderer-process
      renderer({
        nodeIntegration: true,
      }),
    ],
  },
});

and my folder structure is as advised:

.
├── README.md
├── app.vue
├── dist
├── electron
│   ├── electron-env.d.ts
│   ├── main.ts
│   └── preload.ts
├── nuxt.config.ts
├── package.json
├── public
│   └── favicon.ico
├── tsconfig.json
└── yarn.lock

I am getting the following error:

 ERROR  Cannot start nuxt:  Cannot read property 'on' of null                                                  04:25:23

  at configureServer (node_modules/vite-electron-plugin/index.mjs:332:25)
  at Module.createServer (node_modules/vite/dist/node/chunks/dep-4da11a5e.js:62251:30)
  at async buildClient (node_modules/@nuxt/vite-builder/dist/shared/vite-builder.8e427c63.mjs:297:24)
  at async bundle (node_modules/@nuxt/vite-builder/dist/shared/vite-builder.8e427c63.mjs:853:3)
  at async build (node_modules/nuxt/dist/index.mjs:2084:5)
  at async Promise.all (index 1)
  at async load (node_modules/nuxi/dist/chunks/dev.mjs:6785:9)
  at async Object.invoke (node_modules/nuxi/dist/chunks/dev.mjs:6828:5)
  at async _main (node_modules/nuxi/dist/cli.mjs:50:20)

The on refers to the httpServer at this line of code here

Not sure how to solve this issue

[caoxiemeihao]

Hi here! 👋

I have provided a temporary solution based on vite-plugin-electron@0.10.3. I plan to add better nuxt support in the near future.

nuxt.config.ts

import type { AddressInfo } from 'net'
import { build, startup } from 'vite-plugin-electron'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  ssr: false,
  vite: {
    server: {
      middlewareMode: false,
    },
  },
  hooks: {
    // For development
    listen(server) {
      const addressInfo = server.address() as AddressInfo
      Object.assign(process.env, {
        // This is required, and it is used in Electron-Main.
        VITE_DEV_SERVER_URL: `http://localhost:${addressInfo.port}`,
      })
      build({
        entry: 'electron/main.ts',
        vite: {
          build: { minify: false, watch: {} },
          plugins: [{
            name: 'start-electron-app',
            writeBundle() { startup() },
          }],
        },
      })
    },
    // For build
    'build:done'() {
      if (process.env.NODE_ENV === 'production') {
        build({ entry: 'electron/main.ts' })
      }
    }
  },
})

[caoxiemeihao]

vite-plugin-electron vs vite-electron-plugin

1. They are both very simple. Just a simple configuration of the entry file is all that is needed.
2. They both listen for changes to the file and execute electron . command to start or restart the Electron App.
3. vite-plugin-electron uses Vite builds such as Main-Process, Preload-Scripts, which are based on the build API provided by Vite, which means it works well with all of Vite’s ecosystems. vite-electron-plugin is much faster(Not Bundle), it is only based on esbuild to convert .ts files, so its performance is very high. It has a plugin system that references Vite’s implementation, but is not compatible with Vite’s plugins.