How to use Electron API with Vue js component?

Question

I'm using the electron-vue boilerplate, and I want to make my mainWindow a fullScreen after clicking a button.

Electron Window API: electron.atom.io/docs/api/browser-window

HTML:

<button @click="setFullScreen">Switch to Full Screen</button>

Vue:

export default {
  name: 'mainComponent',
  methods: {
    setFullScreen: function() {
      mainWindow.setFullScreen(true);
    }
  }

This is not working. How can I use the Electron API in electron-vue?

and the index.js:

'use strict'

import { app, BrowserWindow } from 'electron'
let mainWindow
const winURL = process.env.NODE_ENV === 'development'
  ? `http://localhost:${require('../../../config').port}`
  : `file://${__dirname}/index.html`
    
function createWindow () {
  /**
   * Initial window options
   */
  mainWindow = new BrowserWindow({
    height: 728,
    width: 1024,
    fullscreen: false,
  })
    
  mainWindow.loadURL(winURL)
 
  mainWindow.on('closed', () => {
    mainWindow = null
  })
    
  // eslint-disable-next-line no-console
  console.log('mainWindow opened')
}
    
app.on('ready', createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow()
  }
})

you will find it as it is in electron-Vue

the picture shows How the Structure of the folder enter image description here

where are you defining mainWindow?

thanksd
– thanksd

2017-04-19 13:55:52 +00:00
Commented Apr 19, 2017 at 13:55 — thanksd
– thanksd, Commented Apr 19, 2017 at 13:55
in index.js, check i have updated the problem!

nbdized
– nbdized

2017-04-19 14:06:12 +00:00
Commented Apr 19, 2017 at 14:06 — nbdized
– nbdized, Commented Apr 19, 2017 at 14:06

Marcello B. · Accepted Answer · 2021-08-10 02:42:35Z

6

mainWindow is not available in your Vue code because it is defined in your main process.

In your single file component, however, you can import remote from electron, where you can get access to the current window. So your code would look something like this.

const {remote} = require("electron")

export default {
  name: 'mainComponent',
  methods: {
    setFullScreen: function() {
      remote.getCurrentWindow().setFullScreen(true);
    }
  }
}

edited Aug 10, 2021 at 2:42

Marcello B.

4,47011 gold badges48 silver badges72 bronze badges

answered Apr 19, 2017 at 14:43

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

WORMSS Over a year ago

What is the alternative for this, as remote has been deprecated? I seen I should do main.js I should add global.api.myFunc. but main.ts is not the same as main.js for vue.

Benargee Over a year ago

@WORMSS electronjs.org/docs/api/ipc-renderer is probably the way to go. I am going to test this myself as I have the same requirements. I am using vue-cli-plugin-electron-builder though.

WORMSS Over a year ago

@Benargee I ended up doing (simplied)

// Vue side window.require('electron').ipcRenderer.invoke('loadFile', filePath);  // background.js before createWindow() import { ipcMain } from 'electron'; ipcMain.handle('loadFile', (_, filePath) => require('fs').promises.readFile(filePath, 'utf-8'))

Collectives™ on Stack Overflow

How to use Electron API with Vue js component?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related