electron-vue | js quick start boilerplate with vue-cli scaffolding | Command Line Interface library

I am working with electron-vue js for building cross platform desktop app. I want to set custom icon when i make build file and want to add product name on app. But when i set custom icon, it work perfect in locally but when make it build then not work correctly. It give an error default Electron icon is used reason=application icon is not set.

Here is Background.js file

I'm building a desktop app with electron-vue and a laravel backend. I setup Laravel Echo in the project and using Echo.channel() worked totally fine. Now I tried to use a presence channel with Echo.join() and it doesn't seem to do anything at all. I can see the connection in the pusher debug console but it never joins the channel. The strangest thing is that it never makes a request to my server to authorize either.

In my renderer/main.js file I create the Echo instance:

How I came to the problem:
I setup an project like this: https://www.smashingmagazine.com/2020/07/desktop-apps-electron-vue-javascript/ until it came up to the coding part, there I added custom stuff. Created Components and so on. Everything works fine in serve then I want to build it.

What I expect as outcome:
App working as in serve mode

What I got:
blank page

What I've tried to fix the problem:
change a wide range of path urls like:

I try to get an Electron app running with webpack, Vuejs and tailwindcss, starting with the electron-webpack template package and adding Vuejs and tailwindcss afterwards, but tailwindcss doesn't work.

There is this equivalent thread on SO, but the solution mentioned there uses electron-vue, which has over 200 open issues and doesn't seems to be maintained anymore.

Does anybody has an idea what went wrong here? I proceeded as follows:

1. Initialize Electron webback boilerplate (according to here):

   ...

I have a preload script that is working well in development. I've seen here that I either need to use a static file or webpack. I went with the static approach because my knowledge is zero with the webpack one.

Currently, I'm using a webview, and this webview has the preload as following:

currently I am trying to setup a system/light/dark mode switcher in my electron app. For the electron app, I have used the electron-vue library and upgraded then the electron version to 7.3.2.

So now I thought, I can use the new API nativeTheme from electron in order to create this new function. But the problem, which I now get is that nativeTheme is undefined, when I import it:

First, let me say thank you for helping with my problem. I started struggling with this problem this morning at about 9 am, it's now 3 pm and I am still not able to figure out what if anything will fix this issue. I lost count of the number of youtube videos I watched in an attempt to understand the underlying principles that I might have missed.

Here are all of the other StackOverflow question-answer pairs that I have also looked at and attempted (sometimes multiple times & in combination even) all without luck:

https://forum.vuejs.org/t/solved-unknown-custom-element-v-card/43018

- did you register the component correctly?

"[Vue warn]: Unknown custom element: ..." Error, when using vuetify UI components with the vue-cli-plugin-vuetify

Vuetifyjs error Unknown custom element: did you register the component correctly

https://github.com/SeregPie/VuetifyImageInput/issues/3

https://michaelnthiessen.com/solve-unknown-custom-element-vue/

Vue/Vuetify - Unknown custom element: - did you register the component correctly?

Unknown custom element: - did you register the component correctly? For recursive components

At this point I have basically given up on finding a solution for Vuetify, and if I still cannot find a solution by Monday, then I will abandon Vuetify completely and move on to another framework such as VueBootstrap.

Problem Setup: I am just trying to learn Electron-Vue-Vuetify by using project-based learning. I decided to start by building a simple calculator application just so I can learn how to create components and wire them together with code and perhaps learn how to do SASS/CSS styling/themes as well.

I created a boiler-plate application using the SimulatedGreg template on GitHub: https://github.com/SimulatedGREG/electron-vue

I validated the application is running. Then I followed the steps to NPM install Vuetify. I noticed that the vuetify installer modified the App.vue file in the root folder but not the App.vue in the renderer folder. So I moved that around, and I also noticed that the Vuetify installer created a new components folder also at the root of the src folder, so I moved that HelloWorld.vue component into the src/renderer/components folder. I made a few other minor changes to make sure I did the best I could to wire it up. Validated that the Vuetify plugin was installed and saved in the Dev-dependencies in the package.json, and a few other odds and ends.

Finally, I was able to get where the application would load but all the styling was wrong. Now it's just a flat text rendered to the DOM with no styling at all. I get a bunch of errors in the developer tools:

Here is the full error log: (Sorry a bit long I know, I tried to remove the long redundant bits)

I'm trying to package an electron app but I'm getting this error:

I'm trying to use the bcrypt-package inside a vue-electron project, but there is an N-api version issue when I try to run it: