How do I use require('electron') in a quasar vue component environment?

Your problem is explained in the Quasar docs

https://quasar.dev/quasar-cli/developing-electron-apps/node-integration

Quasar's suggestion is to use a preload script to attach the node APIs that you want in your renderer processes (ie: BrowserWindows) to the global window object.

https://quasar.dev/quasar-cli/developing-electron-apps/electron-preload-script

1. Attach preload script to BrowserWindow (Main Process)

src-electron/electron-main.js:

import path from 'path'win = new BrowserWindow({  ...  webPreferences: {    preload: path.resolve(__dirname, 'electron-preload.js')  }})

2. Attach Node APIs to window global (Preload Script)

src-electron/electron-preload.js:

window.electron = require('electron')

3. Use Node API through the window global (Renderer Process)

somefile.vue

window.electron.ipcRenderer.sendSync(   'message',   payload)

The answer was just beyond my understanding of how all these components are working together. Hopefully this will help someone else just coming up to speed on developing a Quasar/Vue/Electron app. If you launch your app/website using

quasar dev

you get a browser (renderer) that communicates with main electron process that cannot handle node main process stuff like:

const electron = require('electron')const fs = require('fs')const files = fs.readdirSync('/')console.log(files)

• I couldn't find a clear, concise and simple way. It appears there is a webpack config that can provide the same 'deep' integration, but I was looking for a more out of the box solution.

If you launch your app

quasar dev -m electron

You get deep integration and now can 'require()' or import the above modules within Vue components in your Quasar app.

const electron = require('electron')