For a new, to be announced, project, I needed to combine some technologies I am not yet accustomed with.
GUI: I decided to write the GUI in Vue. Vue is a toolkit to write “modern” HTML/CSS/JS front-ends. Why not React you ask? Because be use Vue at work, and it cannot harm knowing it also a bit. Plus it is called beginnner-friendly and looks pretty similar to React.
Backend: Either a dedicated server, or something with integrated browser. I choose the latter, because I want to try Eclipse 🙂 Eclipse has an integrated Browser engine (Blink from the Chromium project), has APIs to interact with the desktop and can also run the “backend” part alongside the front-end.
Language: Typescript, because also want to try it 🙂
How to start an Electron + Vue + Typescript project
There were some problems in getting started, because the three projects evolved pretty rapidly in the last few months. Thus many posts or tutorials were already outdated, as well as popular templated like https://github.com/SimulatedGREG/electron-vue.
install Vue CLI
install Vue CLI with
$ npm install -g @vue/cli
create a new Project
create a Vue project with your project_name
$ vue create project_name
You can now choose between a default plugin preset, or choose manually the ones you need. You can always install missing plugins later, if you are unsure of your needs.
Vue CLI v3.5.5
? Please pick a preset: default (babel, eslint)
install plugin electron-builder
go to the project folder, and install electron-builder with
$ vue add electron-builder
add Typescript support
add typescript support
$ vue add @vue/typescript
you can now run the electron app via
$ npm run electron:serve
3 thoughts on “How to start an Electron + Vue + Typescript project”
I had an issue adding @vue/typescript
This one solved it for me
Thanks a lot! your’s was the first tutorial I found that didn’t use an (old) github template, but actually did all the steps and let me use the most recent version of everything!
Thanks for this 🙂
I tried sometimes without success