DEV Community

Vite + Vue 3 + electron + TypeScript

Jenuel Oras Ganawed on July 30, 2021

Their is a new post about this will full setup. check it here: https://dev.to/brojenuel/vue-3-vite-typescript-electron-my-full-setup-kgm A lot o...

Read full post

rodrigoaraujolima92 • Feb 15 '22

very nice tutorial

Jenuel Oras Ganawed • Feb 22 '22

Thanks mate :)

Alexander Gorbunov • Feb 23 '22

Thank you for your tutorial!:)
It helped me to configure dev environment for electron, though I'm not using ts😁

Jenuel Oras Ganawed • Feb 23 '22

awesome! Glad to help :)

Dmitriy Nevezhin • Oct 17 '21 • Edited

don't work!

(node:4232) electron: Failed to load URL: localhost:3000/ with error: ERR_CONNECTION_REFUSED
(Use electron --trace-warnings ... to show where the warning was created)

vite is not running after 'npm run electron'

Jenuel Oras Ganawed • Oct 20 '21

I redid what I wrote above, but still works... try re reading the instruction above,, specially the script in package.json

Franco • Sep 10 '22

This problem might be because vite port does not listen in port 3000 of local host. For fix it, see which port is vite running, and then, put it in the main.ts file

mujtaba-lab • Mar 20 '23 • Edited

I got stuck on this one too, here is how I got through:

Or use two separate terminal and run pnpm vite and pnpm dev:electron

"from the article"

liu li • Feb 28 '22 • Edited

Tanks! But i get some problem and could you help me?
With the demo i can run Vue3 + Vite in Electron but i can't use electron in xxx.vue

The code i write is copy what you write, the Demo.vue is what i write.

<script setup lang="ts">
// import { ipcRenderer } from 'electron'
// const x = window.require('electron')
const e = require('electron')

function handleGetDrives() {
    // ipcRenderer.send('on-get-drives', 1)
}
</script>

Douglas Lopes • Nov 28 '22 • Edited

There is some details that changed on vite seems the creation of this post. You have to make some adjusts:

The main.js and preload.js file that controls electron shoud have now the extension cjs, so they should be renamed to main.cjs and preload.cjs because vite uses ES6 and this files don't.

// on package.json
// "vue-tsc --noEmit" should be now just "vite build"
// the tcp port used by vite is now 5173
"scripts": {
    "dev": "vite",
    "build": "vite build && vite build",
    "serve": "vite preview",
    "electron": "wait-on tcp:5173 && cross-env IS_DEV=true electron .",
    "electron:pack": "electron-builder --dir",
    "electron:dev": "concurrently -k \"cross-env BROWSER=none yarn dev\" \"yarn electron\"",
    "electron:builder": "electron-builder",
    "build:for:electron": "vite build && cross-env ELECTRON=true vite build",
    "app:build": "yarn build:for:electron && yarn electron:builder"
  },

// on main.js
// the tcp port used by vite is now 5173
mainWindow.loadURL(
  isDev
    ? 'http://localhost:5173'
    : `file://${path.join(__dirname, '../dist/index.html')}`
);

Wolf Developer • Jan 5 '23 • Edited

I had some troubles to make it work. Your article really helped me, the app is created with success!
However, I see in VS Code that both in electron.js and preload.js I have some errors, because the following are not defined: require, process, __dirname. Do you know a way to fix the problem? Or it's just a clashing configuration from tsconfig.json?
Thanks!

Pacharapol Withayasakpunt • Aug 4 '21

It would be nicer if Electron itself is TypeScript as well.

Jenuel Oras Ganawed • Aug 4 '21

You can actually change it to typescript if you want.

Falcort • Oct 24 '21

As soon as I am trying to use IPC I have an __dirname is not defined in the web console, any solutions ?

Jenuel Oras Ganawed • Oct 25 '21

This video might help,,, its better to use something like context bridge in our preloadjs to create apis for our frontend. It is recommended by the electron documentation..
https://www.youtube.com/watch?v=h9rSUxZkEQw&list=PLwlbj033Wc51ZwPQx3bYO1eb2PProKgBX&index=6&t=617s

Falcort • Oct 27 '21

Thanks a lot, it worked !

Michael Wieczorek • Apr 29 '22

Unfortunately, your tutorial whilst uses TS for the renderer, your main process code is only in JS. Anyone who's writing a desktop app would want TS for both renderer and main process. How to use TS for this and using module aliases?