Getting Started with Desktop Apps using Electron and the Vue CLI

[@MustaphaHamoui]

Thanks! very useful video! For my own future reference in text: 1- vue create electron-example 2- vue add tailwind (optional) 3- vue add electron-builder 4- npm run electron:serve (can also use yarn)

[@capegreg3197]

Works great. tailwind looks interesting too.

[@SuboptimalEng]

Def recommend tailwind, it's awesome!

[@nilsonoliveira2275]

Man! you've save my day! Thanks a lot!

[@SuboptimalEng]

Glad the video helped!

[@BayanBennett]

Good video. My best guess for the dark mode flash is that the browser's set `prefers-color-scheme` to `dark`

[@SuboptimalEng]

Ah, interesting! I know absolutely nothing about Electron (other than how to set it up) so this tip will save me quite a bit of googling 😂

[@lorismith771]

This worked really well. The next thing I'm trying to figure out is how to create an .exe with electron-builder.

[@lorismith771]

I just did 'npm run electron:build' and that seemed to work.

[@sevenhundred77_]

Excellent video

[@garryxia5900]

nice!

[@TheMitchingHour]

Amazingly helpful! Thank you! I’m wondering if there’s any way to prevent users opening the inspector.

[@SuboptimalEng]

Thanks 🙏🏾 Did a quick goole search to learn that you can prevent the inspector from opening by default. (stackoverflow.com/questions/40304833/how-to-make-the-dev-tools-not-show-up-on-screen-by-default-electron ) Not too sure if you can prevent it completely.

[@yoskokleng3658]

And how to build an setup file ? when i did npm rub electron:serve -> it look like in your video but when i copy that build file and share it to my friend's computer. they can't open or install it. pls help

[@Imaginativeone_DF]

How do I integrate vue-devtools?

[@bluebird3131]

Main Electron app is clearly Discord, should be on the video.

[@thiomark7616]

heyy can please just push this example to git so i can clone it, because when i run vue add electron-builder it throws errors

[@SuboptimalEng]

I made 2 separate desktop apps with Vue and they are on my GitHub. You can clone Graphite to see how I set up my app.

[@yuspergerrard1673]

hello does it work on vuejs with a database?

[@SuboptimalEng]

I’m not sure how to set that up but it should be possible - lots of desktop apps like Slack/Discord do that already

[@kenharjuna1405]

so can i just convert my fully completed vue webapp to desktop app with this? instead of build it with electron from the scratch. sorry for bad english, im new to programming, thanks.

[@SuboptimalEng]

I think it depends on whether or not you have a backend for your web app. If it's just a frontend, then it is easier to convert.

[@kenharjuna1405]

@@SuboptimalEng theres a backend for it also. so is it better for me to build from start again, or try to find a way to convert the whole project? thanks alot by the way

[@MustaphaHamoui]

@@SuboptimalEng It's good practice to have access to the back end through an api. So I would re-architecture my app to have two parts: one for the back end with api access (which lives online), and one for the front end interface which accesses the backend through an api... In that case, you don't need to do anything else to your app than what is mentioned here...