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
Electron Build Commands

Developing

$ quasar dev -m electron

# ..or the longer form:
$ quasar dev --mode 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

It opens up an Electron window with dev-tools included. You have HMR for the renderer process and changes to main process are also picked up (but the latter restarts the Electron window on each change).

Check how you can tweak Webpack config Object for the Main Process and the Preload script on the Configuring Electron page.

Chrome DevTools

While in dev mode, hit the following combination (while your app window has focus):

  • macOS: Cmd Alt I or F12
  • Linux: Ctrl Shift I or F12
  • Windows: Ctrl Shift I or F12

Vuejs Devtools

Should you want to also access Vue Devtools for the renderer thread:

$ quasar dev -m electron --devtools

Building for Production

$ quasar build -m electron

# ..or the longer form:
$ quasar build --mode electron

It builds your app for production and then uses @electron/packager to pack it into an executable. Check how to configure this on Configuring Electron page.

If you want a production build with debugging enabled for the UI code:

$ quasar build -m electron -d

# ..or the longer form
$ quasar build -m electron --debug

A note for non-Windows users

If you want to build for Windows with a custom icon using a non-Windows platform, you must have wine installed. More Info.

Publishing (electron-builder only)

$ quasar build -m electron -P always

# ..or the longer form:
$ quasar build --mode electron --publish always

You can specify using electron-builder to build your app either directly on the command line (--bundler builder) or by setting it explicitly within the /quasar.config file at electron.bundler. This flag has no effect when using @electron/packager.

Currently (June 2019) supported publishing destinations include GitHub, Bintray, S3, Digital Ocean Spaces, or a generic HTTPS server. More information, including how to create valid publishing instructions, can be found here.

Valid options for -P are “onTag”, “onTagOrDraft”, “always” and “never” which are explained at the above link. In addition, you must have valid publish configuration instructions in your /quasar.config file at electron.builder.

A very basic configuration to publish a Windows EXE setup file to Amazon S3 might look like this:

/quasar.config file

electron: {
  bundler: 'builder', // set here instead of using command line flag --bundler
  builder: {
    appId: 'com.electron.myelectronapp',
    win: {
      target: 'nsis'
    },
    publish: {
      'provider': 's3',
      'bucket': 'myS3bucket'
    }
  }