A nice combo is to use frameless Electron window along with QBar component. Here’s why.

Setting frameless window

In your src-electron/main-process/electron-main.js file we will make an edit to these lines:

mainWindow = new BrowserWindow({
  width: 1000,
  height: 600,
  useContentSize: true,
  frame: false // <-- add this
})

Handling window dragging

When we use a frameless window (only frameless!) we also need a way for the user to be able to move the app window around the screen. You can use q-electron-drag and q-electron-drag--exception Quasar CSS helper classes for this.

<q-bar class="q-electron-drag">
  ...
</q-bar>

What this does is that it allows the user to drag the app window when clicking, holding and simultaneously dragging the mouse on the screen.

While this is a good feature, you must also take into account that you’ll need to specify some exceptions. There may be elements in your custom statusbar that you do not want to trigger the window dragging. By default, QBtn is excepted from this behavior (no need to do anything for this). Should you want to add exceptions to any children of the element having q-electron-drag class, you can attach the q-electron-drag--exception CSS class to them.

Example of adding an exception to an icon:

<q-bar class="q-electron-drag">
  <q-icon name="map" class="q-electron-drag--exception" />

  <div>My title</div>
</q-bar>

Minimize, maximize and close app

In the example above, notice that we add q-electron-drag to our QBar and we also add handlers for the minimize, maximize and close app buttons by using the Electron API:

// some .vue file

// We guard the Electron API calls, but this
// is only needed if we build same app with other
// Quasar Modes as well (SPA/PWA/Cordova/SSR...)

// The code below requires Node Integration being kept turned "on"
// More info: https://quasar.dev/quasar-cli/developing-electron-apps/node-integration

export default {
  // ...

  methods: {
    minimize () {
      if (process.env.MODE === 'electron') {
        this.$q.electron.remote.BrowserWindow.getFocusedWindow().minimize()
      }
    },

    maximize () {
      if (process.env.MODE === 'electron') {
        const win = this.$q.electron.remote.BrowserWindow.getFocusedWindow()

        if (win.isMaximized()) {
          win.unmaximize()
        } else {
          win.maximize()
        }
      }
    },

    close () {
      if (process.env.MODE === 'electron') {
        this.$q.electron.remote.BrowserWindow.getFocusedWindow().close()
      }
    }
  }
}