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

Quasar UI framework for Vue


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

It has rich set of web components (Plenty of them) which is reactive and will save development time. They also provide styling, spacing with directives.

All these component template samples can be easily copied to your vue project with ease, along with scripts.

How to use Quasar in Vuejs

The best option is to use the Quasar CLI and create a project with a default router.

$ yarn global add @quasar/cli
# or
$ npm install -g @quasar/cli

Create and run project

Using the CLI we can easily create and run project. In fact Quasar uses the Vue CLI to create the project and additionally add dependencies and other stuffs for you.

quasar create <folder_name>

By using the following command you can run the development version of the project. The complete script information can be found on the package.json config file. For now we stick with the dev command

quasar dev

and your app will open on a web browser. For more help visit the Quasar site

Following Quasar posts may help you explore further

Setup Vuetify for Vuejs project


Vuetify is a Material UI framework for Vuejs which make development of cross platform apps quick and easy. It is a UI library which is full of essential layout, app bar, menu and common UI element required for fast development.

Setup vuetify for Vuejs

  1. Create a vue project with routes (recommended) using the CLI tool either by vue create <project-name> or using vue ui
  2. Add vuetify using the following command
vue add vuetify

Optionally you can configure it manually from UI while using the vue ui for creating the vue project.

Let’s visit the vuetify site and try to start with a wire frame example.

Following are the basic layout of an landing page of vuetify-vuejs app.

<v-app>
  <!-- Must have the app property -->
  <v-app-bar app></v-app-bar>

  <v-main>
    Hello World
  </v-main>
</v-app>

All of our layout code goes through <v-app> tag and the main used for some special purposes, in our simple app it just a Hello world string. You can find some special app bar and drawers on the UI section

Keep reading these Vuetify Posts on the go

Vuetify


Vuetify is a Material UI framework for Vuejs which make development of cross platform easy. It is a UI library which is full of essential layout, app bar, menu and common UI element required for fast development.

The UI Kit is best suited for mobiles and cross platform development, these component require zero configuration. All you need to do is create a view project, and vuetify and start building.

Users can copy the snippet for the Vuetify site and add to the template and focus on script part.

Another Material UI which superior to Vuetify is Quasar , we will talk about that in another post

Keep reading Vuetify Posts