Byron Buckley

< Back to Blog

Triggering Vue UI Updates from Electron's Main Process

Published January 14, 2017

    Solution to a problem I encountered while building Notifyer

    Download Notifyer

    One of the main features of Notifyer is the ability to schedule quotes (or really any message) to be triggered once daily. In addition to being scheduled, users can trigger a random quote with a shortcut key. As I implemented this feature, I discovered that though the OS's notification would popup, the application interface was not updated with the new quote.

    Download Notifyer

    Why wasn't it working?!?! The scheduling and shortcut key functionality lives in the main process, while just about everything that the user sees and interacts with lives in the render process. The renderer listened to my message from the main process, and called handleRandomNote as instructed but would only run the OS's native stuff, like notifications.



    So I sought another solution; if clicking the "Note" button in the app updated the UI and triggered the notification, then maybe I could simulate a button click within the Vue component.

    ipc.on('trigger-random-note', function () {
        let cmpNote = vm.$children.filter(child => child.$ === 'note')

    Once the shortcut key event is triggered or the scheduled time occurs, the main process sends a trigger-random-note message that the renderer receives and takes action.