Electron + Electron Forge + TypeScript + Vite + Vue

electron-forge-vue-typescript.md

Don't start with Vue.

Follow the Electron Forge creating a new app instructions. This will provide 4 of the 5 components we want:

• Electron
• Electron Forge
• Vite
• TypeScript

npm init electron-app@latest my-electron-app -- --template=vite-typescript
cd my-electron-app
npm start # fails on ubuntu

If you're on Ubuntu 24.04+ this will fail with The SUID sandbox helper binary was found, but is not configured correctly. which is very annoying. You can just follow the instructions provided in the error message:

sudo chown root:root /home/steven/work/my-electron-app/node_modules/electron/dist/chrome-sandbox                                                                            │
sudo chmod 4755 /home/steven/work/my-electron-app/node_modules/electron/dist/chrome-sandbox
npm start # test it out

Rename src to electron. Use a text editor if this feels to aggressive:

sed -i.bak "s/src\//electron\//g" *.ts *.html
mv src electron
npm start # test it out

Install Vue:

npm install vue
npm install --save-dev @vitejs/plugin-vue vite-plugin-vue-devtools

Follow along with the four files shown in Integrating Vue 3 code but instead of copy/pasting from there, use create-vue in an adjacent directory to make sure you have the latest... whatevers. You can try adding additional plugins, but the main thing is TypeScript:

cd ..
npx create-vue
✔ Project name: … vue-empty
✔ Add TypeScript? … Yes
✔ Add JSX Support? … No
✔ Add Vue Router for Single Page Application development? … No
✔ Add Pinia for state management? … No
✔ Add Vitest for Unit Testing? … No
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? › No
cd ../my-electron-app

Grab files similar to the "Integrating Vue 3 code" doc:

# in case you want the old ones to sanity-check what was there:
mv index.html index-without-vue.html.bak            
mv vite.renderer.config.ts vite.renderer.config.ts.bak

# html
cp ../vue-empty/index.html index.html                   # this goes in the root, not /src
sed -i.bak "s/main\.ts/renderer\.ts/" index.html

# src
cp -R ../vue-empty/src src                              # lots of crap - just grab the whole dir
mv src/main.ts src/renderer.ts

# vite config
cp ../vue-empty/vite.config.ts vite.renderer.config.ts  # matches 'src/renderer.ts'

# try it out
npm start

Last, clean up if you want:

rm *.bak