Now that we’re up to speed with Vue Electron Builder, let’s go ahead and start building our trending movie application. In this file, you can configure the default width and height of the window the application launches with, set the application title, add an auto-update feature, among other things. The only change is the addition of a new background.js file, and this file is responsible for running our Vue application as a stand-alone desktop application. And if you’ve worked with Vue CLI in the past, you will notice that the file structure is pretty much the same. When you open the project folder in your preferred text editor, you should be presented with the following files and directory as shown in the image below.
You can then launch the app by running: npm run electron:serveĪnd you should see an output similar to the screenshot below:Ĭlosing the dev tool, you should see the complete preview of the application, like in the image below: This will ask you for the version of Electron you want to add to this Vue project, and once you’ve done so, you should see a success message indicating that Electron Builder was installed. The final step is to add the Vue Electron Builder plugin, and we can do this by running the command below: vue add electron-builder Next, we want to create a new Vue application, so go ahead and run the command below to create a new app named vue-desktop: vue create vue-desktop
To do this run: npm install -g the above command will install the most recent stable version of Vue CLI, and you can verify that it was successful by running vue -V, which should print out the installed version of Vue. This means we’ll need to install the Vue CLI itself before we can work with it.
Since Electron builder is a Vue CLI plugin.
Click here to see the full demo with network requests Getting started Here is a preview of what our movie application will look like: This is possible with a Vue CLI plugin called Electron Builder, and in the coming sections, we’ll learn how this plugin works by building a sample application that returns a wholesome list of trending movies from themoviedb API. If you’ve worked with Vue before, it’s fairly simple to get started with Electron.
While there have been numerous libraries and frameworks for all of these aspects, Electron stands out when it comes to developing desktop apps with JavaScript, and in this post, we’ll look at how to use Vue with Electron to create our first cross-platform desktop application. JavaScript is regarded as one of the most commonly used programming languages in the world, as it doesn’t just excel at manipulating elements on the frontend with this same language, you can create cross-platform mobile applications, develop APIs and work with backend infrastructure, and create desktop applications. Elijah Asaolu Follow I am a programmer, I have a life.