How to Set Up ELECTRON in Vite and Vue 3

[@gustavogomez8337]

Awesome starter video! Please make this a video series!

[@극곰-d6l]

package.json remove -- "type": "module", vite.config.js base: './', // path.resolve(__dirname, "dist"), :: Vite by default processes asset files (images, CSS, JS, etc.) as absolute paths, not relative paths. If you open the index.html file directly from the file system, these absolute paths may not work properly.

[@alexnik197]

The awesome answer! Thanks! it really helps me

[@puggaming4386]

Thanks!

[@thomasnixon9585]

This is a good start! Although I'm finding it very difficult to find a simple explanation on how to use the native OS features with vite/electron with something like the ipc renderer and ipc main. Most explanations point to doing this with Vue Cli or a complex starter template written with Typescript. A video on setting up a simple app that can open a native dialog and write to a file with vue/vite (not vue cli) would be awesome!

[@vivekascoder]

It would be really nice to make a series on a large vue electron app. Super excited.

[@mohtasimhasan1928]

I wish, it will be happen!

[@LearnVue]

Any ideas for cool electron app projects? I'd love to hear what you're interested in.

[@vivekascoder]

@@LearnVue Ohhk, Let me think

[@vivekascoder]

@@LearnVue One more think make a discord server for your channel as well, That would be amazing.

[@bogdanlupu3679]

@@LearnVue it would be nice if would be a series that would teach the basics of vue some settings for electron. A searching for movies app with some external api calls ( fetch or axios ) and maybe with vuex as state management. It would be a nice project that would tackle all important stuff in vue and some stuff regarding electron setup. (Window menus popup and secondary windows management)

[@Imaginativeone_DF]

May I see a tutorial for seeing Bootstrap (Latest)?

[@codybontecou]

A tutorial on deploying this would be helpful.

[@LearnVue]

Of course - definitely will add that if I make a full mini series of developing in Electron!

[@nikolaykolev5143]

Yes, please!

[@AliBaBasX]

I have a problem I did everything you told me to do but when I run the electron command does not show anything. When I run it on web tells me that DNS can not be reached . Do you maybe know what the problem is ?

[@venegrad]

have an issue, main route is not loading "/", when electron starts he is loading empty route

[@Imaginativeone_DF]

May I see a tutorial for adding SQLite?

[@efo7783]

Waiting for more vite + electron js tutorial 😬😬😬

[@LearnVue]

They're coming! What kind of projects would you like to see me build?

[@forkerion]

How to do routing, so I can have another window with a different view??

[@lunarmagpie4305]

Nice tutorial! You explained how it works really well.

[@LearnVue]

thank you!

[@josuemarroquin8010]

I did everything you did but it didn't pull me, could you help me?

[@JenuelDevTutors]

how about live edit in electron

[@LearnVue]

Yes - there's just two steps. 1 - inside main.js, change `the win.loadPage` to `win.loadURL('localhost:3000')` or wherever your local Vue is running. 2. before running electron:start, start up your Vue app in another terminal tab. then while its running, you can run electron:start for dev purposes. hope this helped!

[@TruePac]

@@LearnVue this is giving me an ``Internal server error: Invalid character in header content ["Location"]``, any ideas?

[@wokle7794]

how do I configure hot reload ?

[@ragnadrok7]

I use a plugin vite-plugin-electron which seems pretty good for development. after configuring, running vite script just starts up an electron app.

[@Imaginativeone_DF]

How do I add Vue Devtools to this setup?

[@davidvelasquez9356]

We're still waiting on the larger tutorial!

[@Thehighschoolscientistforever]

Hey I need some help I'm totally confused, I just completed my project, and I have no idea how to take it online... I created a business management app on windows using electron and a client app on Android, how do I connect them together such that they can send and receive data and update each other, and I would also like to give an option to the user to back up there data some were (maybe to my own raspberry pie).. The apps are complete just the part were I have to link them together to send & receive data is were I have no idea what to do or were to get started Need some ( maybe a lot of guidance )

[@vedaprakashms]

How to build app using Electron-builder ? can you make a video about that ?? Thanks in advance :)

[@LearnVue]

thanks for the idea! will definitely look into it.

[@Credi6464]

Please, go for a full app with vue + electron, I would love e to see it!

[@not_normis]

I'd love to see more videos on Vue with Electron. Can you explain in the future vides how well Vue width Electron perform in comparison to other ways of creating desktop apps?

[@fuggeldev]

Nice tutorial! How do i actually deploy the electron app?

[@rushtothemax76]

nice tutorial! but can you maybe also show or tell us how vue works with the ipc renderer and ipc main

[@EDUARDO-nm1so]

when i export program dont work

[@neonboy22]

Loving your series. Thanks. My request for electron would be to show the differences when creating for web vs standalone. E.g. if I'm talking to a server from the webpage version - does it work the same for a standalone in electron ? My other requests would be: - Using vite and Vue but rebuilding for submission to codepen when demonstrating a vue file example. - Also Vue3, Vite and sygdotjs where the ref component is an array of lists of values used to (say) construct a grid of coloured svg circles which take click events to adjust an svg param stored in the array. I'm having difficulty when I get this deep. So programmatically updating the array is reflected in the drawn svg ui and click events which update params are sent back to the array to keep it correct as the master.

[@LearnVue]

Thanks for the feedback, I'm definitely looking into adding more Vite and Electron tutorials!

[@neonboy22]

@@LearnVue I found a Vue and svgdotjs example here. It is in Vue2 rather than the component form. I will be trying to convert it and use the script setup approach. Lots of use of this and v$ however. - blog.carbonteq.com/creating-interactive-map-in-vue-js/ Vue3 does seem to make it much easier to have reactive dynamic arrays. I have a Playcanvas app with Vue2 in it that was difficult because of that.

[@vivekascoder]

@LearnVue can you make a video on making a pwa from existing vue project.

[@maverickchan9552]

I wonder why images not displayed?

[@kkadir]

Thanks a lot for this excellent tutorial.

[@DarkzarichV2]

Can't make Vite accept Node builtins such as fs etc... Using Electron

[@DarkzarichV2]

UPD: if anyone ever faces this issue the answer is using preload.js, ipcRenderer, ipcMain and contextBridge.exposeInMainWorld

[@mohamedabdelmagid3014]

Nice, but it doesn't reload automatically :(

[@caffeinecat5194]

is there any way adding hotreload?

[@guipe7712]

Cool and interesting video. Very helpful

[@AlexeyDzuba]

very cool tutorial!

[@abderrahmanemr]

Could you make it live reload for speed dev

[@LearnVue]

Yes - there's just two steps. 1 - inside main.js, change `the win.loadPage` to `win.loadURL('localhost:3000')` 2. before running electron:start, start up your Vue app in another terminal tab. then while its running, you can run electron:start for dev purposes. hope this helped!

[@simonediricco1980]

Hi, anyone who made a boilerplate vue3, Pinia, Typescript, vue router and electron? I have not been successful

[@hogaz3497]

hello, do you has used [vite-electron] cli to build your program?

[@Imaginativeone_DF]

This tutorial results in these Electron errors: 2023-02-12 07:35:20.724 Electron[18244:427150] ASB: LNW 2023-02-12 07:35:33.037 Electron[18244:427150] ASB: LNW (null) (null) (null) 2023-02-12 07:35:33.042 Electron[18244:427150] ASB: LNW (null) (null) (null) 2023-02-12 07:35:33.044 Electron[18244:427150] ASB: LNW (null) (null) (null)

[@bulp9893]

Hot reload 😢 missing

[@surferriness]

had to ``` import * *as path from 'path' ``` since my thingy doesn't support dynamic require fsr

[@eliranmauda]

Please make a follow up

[@xiongchun]

good job

[@DanielTames]

awesome!!

[@ahonui]

This video is invalid already since require for path is not longer supported. Also, Electron's documentation is buggy since 'const path = require('node: path') is no longer valid.

[@angelhdzdev]

I have no luck following tutorials 😂, I follow them religiously step by step and always end with errors... The Vue logo doesn't load... help? 🤦‍♂️ Edit: The weirdest thing is the assets folder gets compiled in the dist folder along with the Vue logo and all... but it won't load...

[@angelhdzdev]

UPDATE: I found out the reason of the image not loading. The compiled .js file, has a messed up URL of the Vue logo image: var m="/C:UsersAngelHdzDocumentsDevelopmentJavaScriptprojects\vite_electron\vite-projectdist/assets/logo.03d6d6da.png" I don't have any idea why this is happening. But I solved it by adding the correct "/" in the path to separate the directories.

[@angelhdzdev]

UPDATE #2: It was path.resolve()'s fault. As per an answer I found, I replaced path.resolve(__dir, "./dist") from base in Vite's config, by an empty string, executed npm run build, then npm run electron:start, and it worked right away.

[@wsr6]

@@angelhdzdev But __dir is not exist, can you tell me the answer of the 'base' key?

[@saipraneethkonda4713]

Full stack app with python backend and vue 3 front end please.

[@dayzmelttogether]

is this a dead technology?

[@Trance_Code]

after a year your comment is dead 😂😂😂

[@DaryaIbrahim]

I don't know when this video was published, but we need an update on the subject, since all technologies have changed and Tailwind is important for us vuers ❤️