Create a desktop version of Quasar-Vue app using Electron

Quasar is a UI frame work for developers who were developing web, desk and mobile friendly, responsive app with Vuejs.

With Quasar and Vuejs we can create beautiful Vue app in minutes, thank to the Quasar Frame work. It is easy to learn, I promise you, it didn’t take hours. (Read more about Vuejs).

Running the Desktop version

As you know Quasar app is a web app, it is not meant to desktop or mobile, but with the reactivity of components and controls , it can be much like a desktop app.

With the help of Electron we can build a version for desktop, no matter you are using Mac or Window.

To do this we need electron installed. Quasar CLI will automatically do it for us. For now just hit the terminal with the following command

quasar dev -m electron

This will create the electron project for your app and instantly build executable , also launch app, with developer tools enabled.

That’s all I have today

Following Quasar posts may help you explore further

• Create a desktop version of Quasar-Vue app using Electron - How to build desktop version of Quasar Vue app using Electron
• Quasar UI framework for Vue - About Quasar Vuejs UI framework and How to create and run Vuejs app with Quasar CLI tool
• Setup Vuetify for Vuejs project - How to add vuetify material UI to vuejs project in easy steps
• Vuetify - About Vuetify UI Kit for Vuejs

Create desktop version of a web app with Electron and Nodejs

Electron is Nodejs framework which let you build app with the notion of one code base. With electron you can create cross-platform desktop apps with JavaScript, HTML, and CSS. It is opensource project powered by the Github community. For more info on Electron on Official website

Using Electron we can build platform independent version of  Web app ( with out regenerating all the code again) . Some of the feature may not fully supported

In our example, create a app for Wikipedia.org. Lets get started.

Pre-requisites

For our project and all Electron projects , you should have the following

• Nodejs (https://nodejs.org/en/)
• Electron forge
• Editor of any choice (choose between Atom and Visual code will be wise)

Head over https://nodejs.org/en/ and get the Nodejs which allow you use JavaScript libraries.

Install Forge

Electron forge help us to quickly create project with all file structure we needed. Lets install it

npm install create-electron-app -g

Now we can use create-electron-app to build app as follows

nmp create-electron-app myapp

run the app using the following command on terminal

cd myapp
npm run start

The default app launches a new html page as application. We need website instead of the html page. Edit the following portion of index.js

  // and load the index.html of the app.
    mainWindow.loadFile(path.join(__dirname, 'index.html'));

As

 mainWindow.loadFURL('https://wikipedia.org');

Save the file ,run again and here is your app

Build executable

Now our app is almost ready , let build the executable which will be stored in output folder of our project.

npm run make

Optionally we can change application Name, Icon etc using the JSON package file.