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

How do I access the main electron process fs module from within a renderer side module like a vue component running within the Quasar framework.

I've tried a few variations in a component with the following error:

const { app } = require('electron')

vue-router.esm.js?8c4f:1897 TypeError: fs.existsSync is not a function

const { app } = window.require('electron')

TypeError: window.require is not a function

After looking at what I could find through my friend Google, I am still searching for an answer on how to access the electron main process functions from within a vue component running under the quasar framework. Anyone... anyone? I've seen some github examples of file explorers, but based on the electron documentation it seems the implementation of just simply calling something like fs.readdirSync() should be a lot simpler than what I'm seeing in those implementations.

Solution

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.