[logo] a small computer

Adding Electron to an Existing VueJS project

adding electron to an existing vuejs project

Bradley Kingsley
Published a year ago.
1 minute read
logo of undefined

For future reference, it turns out adding Electron to a Vue app you've already built isn't all that hard.

You might need to migrate from Vue CLI 2 to Vue CLI 3, but that doesn't take much effort.

Make sure you have the latest version of Vue installed

	npm i -g @vue/cli

Then run

vue add electron-builder

and you're good to go!

This command adds files and scripts we need to build our regular Vue app into an Electron app. It also allows us to preview the Vue app in a new Electron window. This way, you can debug it there other than in a regular browser.

It adds a background.js file in your /src/ folder and a few commands like

npm run electron:build


npm run electron:serve

in your package.json. Use this to start the development version of your electron app. You can still start the regular app in a browser by calling npm run serve

Copyright © 2021 The Kenyan Dev