Shall we have a go? Now before we jump in I’m going to assume you have used VUE before and are familiar with NPM/Yarn and the terminal. So with that all done let’s get started.
First and foremost we need to get VUE Cli installed which we can do by running the following.
npm install -g @vue/cli
Then we need to create our app. When you move forward it will ask you which flavor of VUE you want to use and for this tutorial, we are going to use VUE 2. So go ahead and run the following in your terminal to create an app. Options like Eslint, babel, and separate js files are your personal choice so I’ll leave the full flavor up to you.
vue create electron-app
Next we need to install Electron, to do this simply install the VUE electron package as so.
cd electron-app vue add electron-builder
With that done we now need build our little app out by running the following code. You will get asked for a version and for this set up we are using version 13.0.0
Lets now run to serve our app so we can see it in all its wonderful glory!
npm run electron:serve
Now if you want to build out the app to install, run the following code
npm run electron:build
Now if we head over to our file explorer you will see we have a dist folder and contained here is our build with an installer, a bundled and non bundled version all ready to test out!
There is so much more we can do with config files and such but for now have a play and see what you think, maybe try building out a few different apps, use vuex and connect to an api! It’s a satisfying way to develop.
And for you visual learners check out the video below!