How to Set Up ELECTRON in Vite and Vue 3

In today's video we're going to taking a look at how to build a Vue 3 desktop application from your Vite app.

To do this, we're going to be using Electron - one of the most popular frameworks for building cross-platform desktop apps with Javascript.

So many popular apps are using Electron like VSCode, Slack, Twitch, and a ton more.

This is an insanely simple process to get set up. If you want to see more Vite and Electron tutorials (and maybe even a full build along series), let me know in the comments!!

Happy coding,
Matt

//

DOCS

VITE TUTORIAL

FREE VUE 3 CHEATSHEET WITH ESSENTIAL CODE SNIPPETS

follow me on twitter:

INTRO
Daily (Prod. by Lukrembo)

[극곰-dl]

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.

[thomasnixon]

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!

[codybontecou]

A tutorial on deploying this would be helpful.

[efo]

Waiting for more vite + electron js tutorial 😬😬😬

[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.

[simonediricco]

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

[vivekascoder]

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

[gustavogomez]

Awesome starter video! Please make this a video series!

[vedaprakashms]

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

[lunarmagpie]

Nice tutorial! You explained how it works really well.

[ragnadrok]

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]

May I see a tutorial for adding SQLite?

[mohamedabdelmagid]

Nice, but it doesn't reload automatically :(

[Imaginativeone_DF]

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

[rushtothemax]

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

[Imaginativeone_DF]

This tutorial results in these Electron errors: 2023-02-12 07:35:20.724 Electron[18244:427150] ASB: LNW <AtomApplication: 0x7f9379d2ef90> <ElectronNSWindow: 0x7f9379dcdcb0> 0x7f9379dd3f50> <_NSViewBackingLayer: 0x7f9379c69ea0>
2023-02-12 07:35:33.037 Electron[18244:427150] ASB: LNW <AtomApplication: 0x7f9379d2ef90> (null) (null) (null)
2023-02-12 07:35:33.042 Electron[18244:427150] ASB: LNW <AtomApplication: 0x7f9379d2ef90> (null) (null) (null)
2023-02-12 07:35:33.044 Electron[18244:427150] ASB: LNW <AtomApplication: 0x7f9379d2ef90> (null) (null) (null)

[neonboy]

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.

[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 ?

[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 )

[venegrad]

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