Nuxt not rendering in the Electron window

[angelhdzdev]

Hello!

I created a nuxt project with @latest. Then added the nuxt-electron module as I used to do.
Didn't work. So because I'm on Linux now not Windows, I went to Electron docs and installed dependencies for Linux.

Now those errors went away and the Electron windows opens, but the Nuxt app is not rendered.

Followed the quick-start example, read the docs again again, went to my old Issues to see if I messed up.

So my latest attempt was matching all the Nuxt deps to your versions, electron, nuxt, vite, vite-plugin-electron, vite-plugin-electron-renderer, electron-builder, and executed pnpm install.

Nuxt keeps not rendering, no Nuxt logo loading animation. Just the empty Electron window.

Attempts to Solve

• Removed type: "module" from package.json.
• Added "main": "dist-electron/main.js".
• Tried with bun, now pnpm.
• Added --no-fork in the dev script.
• Added .npmrc with shamefully-hoist=true which Nuxt projects don't require nowadays, but apparently for electron package it's still needed.

Nothing.

So to test if Electron is working on my Kubuntu operating system, I created a new Node project, with the index.html and main.js, and installed electron v33, and its working, the HTML is rendered in the Electron window.

So this points to a nuxt-electron module issue or with one of the dependencies (vite-plugin-electron, vite-plugin-electron-rendererer...).

This is my package.json:

{
  "name": "nuxt-app",
  "private": true,
  "main": "dist-electron/main.js",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev --no-fork",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "nuxt": "^3.11.2",
    "vite": "^5.2.8",
    "vue": "latest",
    "vue-router": "latest"
  },
  "devDependencies": {
    "electron-builder": "^24.13.3",
    "nuxt-electron": "^0.7.0",
    "vite-plugin-electron": "^0.28.4",
    "vite-plugin-electron-renderer": "^0.14.5"
  }
}

Environment

Node: 20.16.0
OS: Kubuntu 24.10 (Ubuntu, Debian)

[angelhdzdev]

Update

Also noticed that without --no-fork in the dev script, it picks up random port for the nuxt dev server. With --no-fork, it uses localhost:3000 as normal.

The nuxt app works normally when I remove the nuxt-electron module.

[angelhdzdev]

Update

When I add nuxt-electron module, nuxt app doesn't load on port 3000.

So that's why the electron window shows nothing. The nuxt app is not loading at all.

But when I removed nuxt-electron from modules array, then the nuxt app loads normally.

[angelhdzdev]

Update

Used this template https://vutron.cdget.com/installation-and-build/getting-started and it worked right away.

[hellomp]

I have the same problem on Windows 11 with the same error message. Even though Vutron works, I guess that it won't solve our problems since I don't think we can add Nuxt to a Vue installation

[hellomp]

By putting the exact localhost URL in the electron/main.ts file I was able to get rid of the error and get the Nuxt starting page, but it just gets stuck there and never really loads the main page

[angelhdzdev]

By putting the exact localhost URL in the electron/main.ts file I was able to get rid of the error and get the Nuxt starting page, but it just gets stuck there and never really loads the main page

Same here, put the URL manually and got rid of the error, but Nuxt got stuck.

Hope the author helps us soon.

In the meantime, I continued my app using the Vue + Electron template. 🤷‍♂️😅

[angelhdzdev]

Today installed Node 18 latest because I'm using Node 23.3.0 to rule out incompatibility.
Same issues.

I copied the code from the repo, and added it manually in my code, nuxt module and vite config to rule out dependency issues.

Same issues.

It must be a change in nuxt package, vite package, or vite-plugin-electron.

I had hope when I saw server.hot.send({type: 'full-reload'}) deprecated (they are using some env api for version 6),, but it didn't do anything removing that line.

[angelhdzdev]

#90 apparently solves this!!!

[hellomp]

It worked! I don't know what are the downsides of using this setting, but it seems that it's fine. Thanks for the heads up!