CODEWITHSUNDEEP
vue.jselectronquasar
sday
sday

Reputation: 1051

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.

Upvotes: 4

Views: 3177

Answers (3)

mattdedek
mattdedek

Reputation: 2625

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')
  }
})
  1. Attach Node APIs to window global (Preload Script)

src-electron/electron-preload.js:

window.electron = require('electron')
  1. Use Node API through the window global (Renderer Process)

somefile.vue

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

Upvotes: 2

sday
sday

Reputation: 1051

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.

Upvotes: 1

Alex
Alex

Reputation: 1423

const electron = require('electron')

Upvotes: -1

Related Questions