Quasar - Production Build - Electron, android

I've tried using linux, windows but not mac, haven't got the chance to build it because I don't have the hardware.

Electron Linux

Dev

quasar dev -m electron

Production

// windows / linux / mac
quasar build -m electron

// android
quasar build -m capacitator -T android

On the example above, I tried to use cordova but failed then I tried to use this capacitator explained in the docs and it works.

Android Debugging

get an emulator ready using AVD

chrome://inspect/#devices

After showing remote target click on port forwarding add port 8080 and url localhost:8080 then in the emulator open chrome then go to localhost:8080

Electron

go to the output folder

./{name of the app}

Electron - set min size of the window

electron-main.js

mainWindow = new BrowserWindow({
    width: 1000,
    height: 600,
    minWidth: 800,
    minHeight:500,
    useContentSize: true,
    webPreferences: {
      nodeIntegration: process.env.QUASAR_NODE_INTEGRATION,
      nodeIntegrationInWorker: process.env.QUASAR_NODE_INTEGRATION,
    }
  })

Electron - Adding menu

electron-main-menu.js

import { app } from 'electron'

const isMac = process.platform === 'darwin'

export const menuTemplate = [
  // { role: 'appMenu' }
  ...(isMac ? [{
    label: app.name,
    submenu: [
      { role: 'about' },
      { type: 'separator' },
      { role: 'services' },
      { type: 'separator' },
      { role: 'hide' },
      { role: 'hideothers' },
      { role: 'unhide' },
      { type: 'separator' },
      { role: 'quit' }
    ]
  }] : []),
  // { role: 'fileMenu' }
  {
    label: 'File',
    submenu: [
      { role: 'Settings' },
      isMac ? { role: 'close' } : { role: 'quit' }
    ]
  },
  // { role: 'editMenu' }
  {
    label: 'Edit',
    submenu: [
      { role: 'undo' },
      { role: 'redo' },
      { type: 'separator' },
      { role: 'cut' },
      { role: 'copy' },
      { role: 'paste' },
      ...(isMac ? [
        { role: 'pasteAndMatchStyle' },
        { role: 'delete' },
        { role: 'selectAll' },
        { type: 'separator' },
        {
          label: 'Speech',
          submenu: [
            { role: 'startSpeaking' },
            { role: 'stopSpeaking' }
          ]
        }
      ] : [
        { role: 'delete' },
        { type: 'separator' },
        { role: 'selectAll' }
      ])
    ]
  },
  // { role: 'viewMenu' }
  {
    label: 'View',
    submenu: [
      { role: 'reload' },
      { role: 'forceReload' },
      { role: 'toggleDevTools' },
      { type: 'separator' },
      { role: 'resetZoom' },
      { role: 'zoomIn' },
      { role: 'zoomOut' },
      { type: 'separator' },
      { role: 'togglefullscreen' }
    ]
  },
  // { role: 'windowMenu' }
  {
    label: 'Window',
    submenu: [
      { role: 'minimize' },
      { role: 'zoom' },
      ...(isMac ? [
        { type: 'separator' },
        { role: 'front' },
        { type: 'separator' },
        { role: 'window' }
      ] : [
        { role: 'close' }
      ])
    ]
  },
  {
    role: 'help',
    submenu: [
      {
        label: 'Learn More',
        click: async () => {
          const { shell } = require('electron')
          await shell.openExternal('<https://electronjs.org>')
        }
      }
    ]
  }
]

electron-main.js

const menu = Menu.buildFromTemplate(menuTemplate)

function createWindow () {
  ...
  Menu.setApplicationMenu(menu)
}

Electron - Listen to setting option with IPC send

submenu: [
{ 
  label: 'Settings',
	accelerator: 'Ctrl+Shift+S',
  click() {
    mainWindow.webContents.send('show-settings')
  }
},

App.vue

export default {
  mounted() {
    if (this.$q.platform.is.electron) {
      require('electron').ipcRenderer.on("show-settings", () => {
	      this.$router.push('/settings')
    })
    }
    this.getSettings(),
    this.handleAuthStateChange()
  }
}

Electron - Listen to quit app

Layout.vue

<q-item
  v-if="$q.platform.is.electron"
  @click="quitApp"
  clickable
  class="text-white absolute-bottom">
  <q-item-section avatar>
    <q-icon name="power_settings_new" />
  </q-item-section>
  <q-item-section>
    Quit
  </q-item-section>
</q-item>

methods: {
  ...mapActions('auth', ['logoutUser']),
  openURL,
  quitApp(){
    this.$q.dialog({
      title: 'Confirm',
      message: 'Really quit Awesome?',
      cancel: true,
      persistent:true
    }).onOk(() => {
      if (this.$q.platform.is.electron) {
        require('electron').ipcRenderer.send('quit-app')
      }
    })
  }
}

import { ipcMain } from 'electron'

ipcMain.on('quit-app', () => {
  app.quit()
})