⚠️ Important Notes: - if you have trouble installing the menubar package @20:32, try running npm install menubar --force - if you have trouble building the Windows version on a Mac, try running brew install --cask wine-stable - if you see a Wine error after installing Wine then building the app, go to Applications > Wine Stable > right click > Open > Open, then close it and try to build again - at the time of publishing this video, VirtualBox is not supported on M1 Apple Silicon Macs, you might need to find an alternative such as Parallels or UTM Please Like, Share, Subscribe & Comment - it all helps me create more content for you! 👉 My Courses: dannys.link/courses 👉 Download Fudget: www.fudget.com 👉 My VSCode Setup: dannys.link/vscodesetup 👉 DONT CLICK THIS: dannys.link/dontclick
I often subscribe but I never comment, even if I am a power user of RUclips. You will be the exception that confirm the Rule. God be witness, your video was a blast! So many things learned!! My schedule is f.. for today, but this was so much fun!!!
Excellent video. It took me a while (running Windows 11) to realize the altered menubar was in lower right, not the top (as in MAC)! This was described earlier but I forgot, and others may as well.
Thanks, wasn't aware of the menubar module. May come in handy as an app launcher for a business suite or a collection of resources for development. Like quasar.dev, iconfinder, material icons etc.
This is cool! I can use it for my ongoing Quasar project that also needs a helper app that runs in the menubar. I was thinking I would have to write it with the native Windows API(which I've done for a tiny temporary screensaver disabler I wrote and used for years when I was using my work desktop remotely) but now it can possibly be multi-platform too.
Hello, great tutorial! @30:02, you mentioned about hiding the os menu completely. I'm looking for this option for macOS but can't find it. Do you know how to achieve this?
@@MakeAppswithDanny Much appreciate your time to reply this. I've figured it out myself already, I also landed on those same articles but it's not working for me due to some other extra modifications in my code that I'm not aware (copy pasta issue :D )
Hi Danny, any plans on an updated course on Quasar 2 with Vue 3 with composition api incl state management? or any good resources you recommend to learn these two? Thanks
I may do a new Quasar 2 course at some point. For now, I have a new course coming very soon, “Vue 3: Composition API (with Pinia & Vite)”. This course should teach you everything you need to retake the Quasar courses with Quasar 2 & Vue 3: dannys.link/compositionapi
@@dipanshu2207 I’m hoping to start posting part of it on RUclips in the next couple of weeks. Then the full course will be published 4 weeks after I start doing that.
Yeah I think it’s because each Electron app is bundled with Chromium and 100s of node modules. I don’t think it’s a deal breaker nowadays though. If the average user has a 250GB hard drive, they could fit 1,838 of these suckers on there.
@@MakeAppswithDanny No, not with modern fibre etc, it just gets me twitching, I used to baulk at the Borland 2MB+ file sizes back in the day when my little C++ / VB app took a few KBs for the same thing essentially. 136MB is insane though, I guess the way electron works it is fully self contained and has to bundle chromium etc as you say, but took me by surprise!
Thank you for the tutorial, I have another question I hope you can help me, I use quasar electron to build the project, there are some external programs that need to be packaged into the resource directory, like windows -> some app.exe, mac command line program -> some app. Can you tell me how to do it?
Curious, how would you send from main all the way down to the component ?? I have a way I've been using, but curious on how you would achieve this ? For instance: ipcRenderer (from main) => ipcRenderer.on... (context bridge) => VUE COMPONENT How would you return any results or objects to the component ?
Yes it is possible, I'm not sure how to do it with Quasar's context bridge though. Have you tried importing ipcRenderer from Electron directly in the component and using it there? (not sure if that will work...)
@@MakeAppswithDanny Quasar will not allow you to import anything into component that requires electron. They even removed $q.electron. You call context bridge methods from component. I was successful in sending messages from main to component. (not responses). I believe I was using some electron message function that deals with the use of ports. I can't remember atm. As we speak, i'm using quasar, and coding from global hotkey (in main) to send to component... trying anyways, forgot I accomplished it before, but trying not to find some hacky way to do it lol.
look up "MessagePorts" in Electron docs. that's how I achieved main -> component. But I believe I had to bounce between component; contextBridge; and Main.
When you click the plus icon you get some menu bar entries in the top left of the screen where the app's name is listed as "Electron". I've been trying everything and I can't figure out how to change that label. Any ideas?
@@MakeAppswithDanny Okay that works for me. I can't test an actual build at the moment (no root access), but if it's fine in production that's good enough for me. Thanks!
⚠️ Important Notes:
- if you have trouble installing the menubar package @20:32, try running npm install menubar --force
- if you have trouble building the Windows version on a Mac, try running brew install --cask wine-stable
- if you see a Wine error after installing Wine then building the app, go to Applications > Wine Stable > right click > Open > Open, then close it and try to build again
- at the time of publishing this video, VirtualBox is not supported on M1 Apple Silicon Macs, you might need to find an alternative such as Parallels or UTM
Please Like, Share, Subscribe & Comment - it all helps me create more content for you!
👉 My Courses: dannys.link/courses
👉 Download Fudget: www.fudget.com
👉 My VSCode Setup: dannys.link/vscodesetup
👉 DONT CLICK THIS: dannys.link/dontclick
This dude isn't just teaching app-making; he's also guiding us on finding resources online.
I often subscribe but I never comment, even if I am a power user of RUclips. You will be the exception that confirm the Rule. God be witness, your video was a blast! So many things learned!! My schedule is f.. for today, but this was so much fun!!!
Thanks Sylvain! Quasar is always a blast! 👍
Awesome! Thank you Danny.
Cheers Basar! 👍
Nice video Danny, very good tutrial. I think a pomodoro app would work great in the menubar.
Definitely. I actually started working on a Pomodoro app a while back. I may jump back into it when I’m done with Fudget 2 👍
Love your tutorials, good to see you back!
Thanks Pevi 👍
谢谢！
My first Super Thanks! Cheers Tony 👍
This tutorial is spectacular! Thank you.
Glad you enjoyed it! Thanks Samuel!
As usual, excellent content
Thanks deachful! 👍
Excellent video. It took me a while (running Windows 11) to realize the altered menubar was in lower right, not the top (as in MAC)! This was described earlier but I forgot, and others may as well.
Thanks Sam! 👍
Very cool, Danny! Thanks a bunch for all these amazing tutorials!
Thanks Kamal! 👍
Thanks for the video! Nice work
Thanks Juan!
great tutorial. thanks
You're welcome, Sebsen!
Thanks, wasn't aware of the menubar module. May come in handy as an app launcher for a business suite or a collection of resources for development. Like quasar.dev, iconfinder, material icons etc.
Nice ideas Alexander!
You are amazing person
Thanks Mohammed!
This is cool! I can use it for my ongoing Quasar project that also needs a helper app that runs in the menubar. I was thinking I would have to write it with the native Windows API(which I've done for a tiny temporary screensaver disabler I wrote and used for years when I was using my work desktop remotely) but now it can possibly be multi-platform too.
That’s great to hear, Ted! My dad is called Ted. My mum isn’t.
@@MakeAppswithDanny 🤣😂
Hey Danny. Good to see you back. Such a rather small app is around 200MB after compiling it with electron?? Did I see that correctly??
Yeah that's a bit of a bummer. I think it's because each Electron app has Chromium and 100s of node modules bundled with it...
Hello, great tutorial! @30:02, you mentioned about hiding the os menu completely. I'm looking for this option for macOS but can't find it. Do you know how to achieve this?
Hi Kai, isn't that hidden automatically when you use the menubar plugin?
@@MakeAppswithDanny Ah thanks, yes, this might be it. I was trying to achieve this with normal BrowserWindows without the menubar plugin :)
At 30:03, How do you hide the menu on the left entirely? Also how do you skip the app icon in the dock and in cmd+tab?
For removing menu: stackoverflow.com/a/39092033/1496114
For managing dock icon: www.electronjs.org/docs/latest/api/dock
@@MakeAppswithDanny Much appreciate your time to reply this. I've figured it out myself already, I also landed on those same articles but it's not working for me due to some other extra modifications in my code that I'm not aware (copy pasta issue :D )
@@PhucNguyen-hr5ue Ok good luck, Phuc!
Hi Danny, any plans on an updated course on Quasar 2 with Vue 3 with composition api incl state management? or any good resources you recommend to learn these two? Thanks
I may do a new Quasar 2 course at some point. For now, I have a new course coming very soon, “Vue 3: Composition API (with Pinia & Vite)”. This course should teach you everything you need to retake the Quasar courses with Quasar 2 & Vue 3: dannys.link/compositionapi
@@MakeAppswithDanny Great to hear. Any expected date when this will be out?
@@dipanshu2207 I’m hoping to start posting part of it on RUclips in the next couple of weeks. Then the full course will be published 4 weeks after I start doing that.
@@MakeAppswithDanny Great! Looking forward.
Nice tutorial, the only issue I have with Electron is the file sizes it produces, I mean 136MB for a counter app?
Yeah I think it’s because each Electron app is bundled with Chromium and 100s of node modules. I don’t think it’s a deal breaker nowadays though. If the average user has a 250GB hard drive, they could fit 1,838 of these suckers on there.
@@MakeAppswithDanny No, not with modern fibre etc, it just gets me twitching, I used to baulk at the Borland 2MB+ file sizes back in the day when my little C++ / VB app took a few KBs for the same thing essentially. 136MB is insane though, I guess the way electron works it is fully self contained and has to bundle chromium etc as you say, but took me by surprise!
Thank you for the tutorial, I have another question I hope you can help me, I use quasar electron to build the project, there are some external programs that need to be packaged into the resource directory, like windows -> some app.exe, mac command line program -> some app. Can you tell me how to do it?
I'm not sure. Best of luck! 👍
Thanks
My pleasure Gergely! 👍
Wouldn't setting resizable to false prevent resizing, instead of setting max/min width/height?
Ooh yeah I guess it would. I wasn’t aware of that option. Oops… 😂
Curious, how would you send from main all the way down to the component ??
I have a way I've been using, but curious on how you would achieve this ?
For instance:
ipcRenderer (from main) => ipcRenderer.on... (context bridge) => VUE COMPONENT
How would you return any results or objects to the component ?
Yes it is possible, I'm not sure how to do it with Quasar's context bridge though. Have you tried importing ipcRenderer from Electron directly in the component and using it there? (not sure if that will work...)
@@MakeAppswithDanny Quasar will not allow you to import anything into component that requires electron. They even removed $q.electron. You call context bridge methods from component. I was successful in sending messages from main to component. (not responses). I believe I was using some electron message function that deals with the use of ports. I can't remember atm.
As we speak, i'm using quasar, and coding from global hotkey (in main) to send to component... trying anyways, forgot I accomplished it before, but trying not to find some hacky way to do it lol.
look up "MessagePorts" in Electron docs.
that's how I achieved main -> component. But I believe I had to bounce between component; contextBridge; and Main.
@@kaiserbyte5615 cool thanks!
good evening Danny, please can you do a tutorial on Vue firebase push notification
I’ll consider it. Thanks! 👍
When you click the plus icon you get some menu bar entries in the top left of the screen where the app's name is listed as "Electron". I've been trying everything and I can't figure out how to change that label. Any ideas?
Hi Tony. I don't think you can change this until you build it for production. When in Dev mode, the app name is always Electron 👍
@@MakeAppswithDanny Okay that works for me. I can't test an actual build at the moment (no root access), but if it's fine in production that's good enough for me. Thanks!
@@TonyBogdanov No worries 👍
I have problème for build
What problem?