Why donate
API Explorer
Upgrade guide
NEW!
The quasar.config file
Convert to CLI with Webpack
Browser Compatibility
Supporting TypeScript
Directory Structure
Commands List
CSS Preprocessors
Routing
Lazy Loading - Code Splitting
Handling Assets
Boot Files
Prefetch Feature
API Proxying
Handling Webpack
Handling process.env
State Management with Pinia
State Management with Vuex
Linter
Testing & Auditing
Developing Mobile Apps
Ajax Requests
Opening Dev Server To Public
Quasar CLI with Webpack - @quasar/app-webpack
Preparation for Electron

Before we dive in to the actual development, we need to do some preparation work.

Step 1: Add Quasar Electron Mode

In order to develop/build a Quasar Electron app, we need to add the Electron mode to our Quasar project. What this does is that it yarn/npm/pnpm/bun installs some Electron packages and creates /src-electron folder.

$ quasar mode add electron

Every Electron app has two threads: the main thread (deals with the window and initialization code – from the newly created folder /src-electron) and the renderer thread (which deals with the actual content of your app from /src).

The new folder has the following structure:

icon.icns
# Icon file for Darwin (MacOS) platform
icon.ico
# Icon file for win32 (Windows) platform
icon.png
# Tray icon file for all platforms (especially Linux)
electron-preload.js
# (or .ts) Electron preload script (injects Node.js stuff into renderer thread)
electron-main.js
# (or .ts) Main thread code

A note for Windows Users

If you run into errors during npm install about node-gyp, then you most likely do not have the proper build tools installed on your system. Build tools include items like Python and Visual Studio. Fortunately, there are a few packages to help simplify this process.

The first item we need to check is our npm version and ensure that it is not outdated. This is accomplished using npm-windows-upgrade. If you are using yarn, then you can skip this check.

Once that is complete, we can then continue to setup the needed build tools. Using windows-build-tools, most of the dirty work is done for us. Installing this globally will in turn setup Visual C++ packages, Python, and more.

Note: April 2019

In Powershell.exe (Run as Admin) npm install --global windows-build-tools seems to fail at the moment with errors pointing to python2 and vctools. You can get around this with Chocolatey. One-liner install:

Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString(‘https://chocolatey.org/install.ps1’))

and then run choco upgrade python2 visualstudio2017-workload-vctools.

At this point things should successfully install, but if not then you will need a clean installation of Visual Studio. Please note that these are not problems with Quasar, but they are related to NPM and Windows.

Step 2: Start Developing

If you want to jump right in and start developing, you can skip the previous step with “quasar mode” command and issue:

$ quasar dev -m electron

# passing extra parameters and/or options to
# underlying "electron" executable:
$ quasar dev -m electron -- --no-sandbox --disable-setuid-sandbox
# when on Windows and using Powershell:
$ quasar dev -m electron '--' --no-sandbox --disable-setuid-sandbox

This will add Electron mode automatically, if it is missing. It will open up an Electron window which will render your app along with Developer Tools opened side by side.