#StackBounty: #vue.js #electron How to create an "always on top Component" for an electron app

Bounty: 100

I wanted to create a button that is always on top off the operating system and controls funtions in an electron app. I figured out how to do that with the whole app with the alwaysOnTop option, but this is obvoiusly not the solution that I am looking for. Would I have to start a second electron process to achieve something like that? I want it to be connected to the original App, of course. I am a targeting windows and osx and I am using vue with typescript, if that makes a difference.

I managed to start a second process, but it renders the same app in the new windows aswell, like so:

enter image description here

I achieved that by just starting a new window in the background.ts, but I did not figure how to use a different entry point for this new window, even though I am pointing to a different index.html, which I called fab.html. e.g.:

fab = new BrowserWindow({
width: 100,
height: 100,
alwaysOnTop: true,

if (process.env.WEBPACK_DEV_SERVER_URL) {
  // Load the url of the dev server if in development mode
  fab.loadURL(process.env.WEBPACK_DEV_SERVER_URL as string)
  if (!process.env.IS_TEST) fab.webContents.openDevTools()
 } else {
  // Load the index.html when not in development

The issues I am having then is, that the main.ts that starts the Vue App does not inject the Vue Stuff, so I can not use my vuex and all the other things I am using. I tried to just import electron and use the ipc stuff from electron to communicate with my actual app, but I can not import ipcmain for some reason and accodring to the documentation, i need ipcmain to send messages to the render process.

This is what it looks like:

<html lang="en">

        <div id="fabApp" class="hotkeys-inactive fab" onclick="sendToMain();"></div>

        const { ipcRenderer } = require('electron')

        const fab = document.getElementById("fabApp");

        ipcRenderer.on('fab-clicks', (event, arg) => {
            if (arg === "on") {
                console.log("turn ON")
            } else {
                console.log("turn OFF")

        function sendToMain() {
            ipcRenderer.send('fab-clicks', 'clicked');


Appart that it is not working, I would also just like to use vue, not do all this native js stuff here :/ Seems pretty hacky and all.

Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.