Trigger an event from the main js file in Electron to communicate with a Vue component

I am currently developing an electron app powered by electron version 5.0.0

The issue I'm facing is with utilizing electron's power monitor feature, which can only be accessed from the main electron js file. However, I need to communicate this information to a vue component. I attempted using an event bus:

    powerMonitor.on('lock-screen', () => {
        console.log("locked")
        EventBus.$emit('logout');
    })
})

But it seems that the event bus only functions within vue components. Does anyone have any solutions on how I can transmit an event from the electron main js file to a vue component?

javascriptvue.jselectron

Answer №1

After some exploration, I finally cracked the code on how to do it.

The key is to utilize the ipcRenderer listener in conjunction with webContents to transmit the event. Here's an example of how it should be structured.

//main.js
    powerMonitor.on('unlock-screen', () => {
        console.log("unlocked")
        win.webContents.send('computer-unlock')
    })

//Vue Component
    require('electron').ipcRenderer.on('computer-unlock', () => {
                console.log("logging in");
                _this.computerLocked = false;
    })

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

An effective method to showcase the HTML content retrieved by getElementsByClassName using JSON.parse()

Can someone help me modify this code so that it displays the value of favFood? It currently works with getElementById but not getElementsByClassName, and I want to use a class: server file - ProcesssingFileOnServer.php: <?php $myObj = new stdClass(); ...

javascriptphphtmljson

ReactJS: Checkbox status remains consistent through re-rendering of Component

I have developed a JSfiddle example Initially, this fiddle displays a list of checkboxes based on the passed props to the component. When you click the Re-render button, the same component is rendered with different props. Now, please follow these steps- ...

javascriptreactjscheckbox

The response from the XHR object is coming back as "Object Object

Recently, I've been faced with the challenge of working with an API that provides articles. Within the array returned by the API, there are attributes like author, title, and description. However, despite my efforts, each time I attempt to retrieve th ...

javascriptarraysjson

Generating a JavaScript JSON object by iterating through a JSP bean with the help of JSTL's c:forEach

Two Java classes are defined as follows: public class Abc{ private List<SomeOtherClass> someClass; private String k; private String m; } public class SomeOtherClass{ private String a; private String b; private String c; } On a ...

javascriptjsonjsp

Check if a specific string is present in an array using JavaScript

When working with SQL, we can easily check if a string is in a list using the following syntax: Column IN ('a', 'b', 'c') But how can we achieve this in JavaScript without it being so cumbersome? if (expression1 || expressi ...

javascriptstringlist

Other options besides re-flowing and repainting

After doing some research on various platforms like Stack Overflow, I've come across information stating that re-paints and re-flows can be quite taxing on a browser's resources. I am interested in learning about alternative CSS/JS techniques to ...

javascripthtmlcssrepaintreflow

What is the best way to conceal a global component like a navbar on specific routes?

Most of the pages on my vuejs SPA feature a top navbar component, but there are certain views like the login page where I do not want it to be displayed. My current solution involves importing the navbar and adding it to each view separately when needed. ...

vue.jsvuejs2vue-router

Encountering an error while using $state.go function in Angular JS testing

Below is the code snippet for a Controller in Angular JS: describe('Controller: homeCtrl', function () { beforeEach(module('incident')); var homeCtrl, $state; beforeEach(inject(function ($controller, _$state_) { $state = _ ...

javascriptangularjskarma-jasmine

How to eliminate query strings from the current page's URL using JavaScript

Looking for a way to remove the querystring from the current page URL using JavaScript when a button is clicked. Can someone please provide the necessary code for this? ...

javascript.net

Exploring the World of Three.js: Modifying Facial Structures

Can anyone help me figure out how to obtain the average x, y, z coordinates of a specific face in three.js? Or, could someone guide me on extracting the individual x, y, z coordinates of the three vertices that compose a face and averaging them? Currently ...

javascriptthree.js

Struggling to implement the UI router into my Angular Framework

I've been working on a framework that is supposed to be router agnostic. While I've managed to make it work with ngRoute, I just can't seem to get it functioning with UI Router. Here's a snippet of the main app module: (function () { ...

javascriptjqueryhtmlangularjs

Delete an entry from the list

I have a fully functional Ajax call and function that fills up a datalist. This datalist is utilized to choose from a limited list and add it to a UL element on the page. Once an option is added from the datalist to the actual list, I aim to eliminate that ...

javascripthtmlhtml-datalist

Combining Objects in an Array using JavaScript

Here is an array example: let array = [ { yearBirth : 1995, name : 'daniel', }, { yearBirth : 1995, name : 'avi', }, { yearBirth : 1993, name : 'john', }, { yearBirth : 1993, n ...

javascriptnode.jsreactjsarrays

Display additional images with "Show More" view

I'm looking to create a view similar to the one shown in this image: https://i.stack.imgur.com/AZf61.png Within my FlatList, all the data is being populated including these thumbnails. These thumbnails are stored in an array of objects where I retri ...

javascriptiosreactjsreact-native

Steps to dynamically populate a datatable with JSON data by triggering a click event in jQuery

I am facing an issue with feeding JSON data into datatables when the search button is clicked. The JSON data structure is as follows: [ { "port_code":"BOM", "cont_details_id":"9", "price":"44.000", "cont_price":"500", "c ...

javascriptjqueryjsondatatabledatatables

During initialization, React/Redux reducer produced an undefined value

Recently, I started working on my debut React/Redux project. Initially, everything was smooth sailing until I decided to implement a new reducer. The process seemed straightforward, but upon loading the page, an error popped up stating "Reducer X returned ...

javascriptreactjsreduxreact-redux

Tips for minimizing redundant calls to a JavaScript function

Currently working on an app using php and js. I have a menu sidebar with various items, where clicking on an item loads the corresponding php file into the main container using jQuery's load function. However, there is a critical problem when loading ...

javascriptphpjqueryajax

Automatically calculate the product of two columns in a gridview

Greetings, I am currently working on a project that involves calculating values from two textboxes within a gridview and displaying the result in a third textbox using JavaScript. The calculation should occur as soon as a value is entered into the second ...

c#javascriptgridview

Tips for preventing multiple links from opening when clicking the same link

Having a data grid with a hyperlink control that allows users to open a new tab displaying selected item information poses the issue of multiple tabs opening when the same item is clicked multiple times. Is there a way to have the tab open only the first t ...

javascriptc#asp.nethyperlinktabs

The Chrome extension functions properly when the page is refreshed or loaded, but it does not work with internal navigation

When landing on a YouTube page starting with w*, I have a script that triggers an alert with the URL. However, this only works when entering the page directly or upon refreshing. I am trying to make the alert trigger when navigating internally to that page ...

javascriptgoogle-chrome-extension