Vue3 Electron sub components / routes not showing

Question

So i've been workin gon an application in Vue3 (v3.2.25) and Electron (v16.0.7). I've been using vue-router4 to navigate between my pages inside the application. I noticed that in development my application runs fine. and everything loads how it should But in production (when built) the electron app does not render everything that has to do with routers <router-view/> for example.

My App.vue file that is loaded as the first component:

<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
</script>

<template>
  <h1>bpe</h1>
  <router-view />
</template>

the bpe is rendered. but not the router

My router:

import {
  createRouter,
  createWebHashHistory,
  createWebHistory,
  Router,
  RouteRecordRaw,
} from "vue-router";

const routes: RouteRecordRaw[] = [
  {
    path: "/",
    component: () => import("../pages/Login.vue"),
  },
  {
    path: "/dashboard/",
    component: () => import("../pages/dashboard/Home.vue"),
  },
];

const router: Router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

my vue main.ts

import { createApp } from "vue";
import App from "./App.vue";
import "./assets/tailwind.css";
import router from "./middleware/router";

const app = createApp(App);

app.use(router);

app.mount("#app");

electron.js:

const path = require("path");
const { app, BrowserWindow } = require("electron");
const log = require("electron-log");
const isDev = process.env.IS_DEV == "true" ? true : false;
const { autoUpdater } = require("electron-updater");
autoUpdater.logger = log;
autoUpdater.logger.transports.file.level = "info";
autoUpdater.setFeedURL({
  token: "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",
  owner: "Gezellligheid",
  repo: "bandi-app",
  provider: "github",
});

// import { autoUpdater } from "electron-updater";

function createWindow() {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,

    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
      nodeIntegration: true,
    },
  });

  // and load the index.html of the app.
  // win.loadFile("index.html");
  mainWindow.loadURL(
    isDev
      ? "http://localhost:3000"
      : `file://${path.join(__dirname, "../dist/index.html")}`
  );
  // Open the DevTools.
  if (isDev) {
    mainWindow.webContents.openDevTools();
  }
  // if (!isDev) {
  //   mainWindow.removeMenu();
  // }
}
autoUpdater.on("checking-for-update", () => {
  console.log("Checking for update...");
});
autoUpdater.on("update-available", (info) => {
  console.log("Update available.", info);
});
autoUpdater.on("update-not-available", (info) => {
  console.log("Update not available.", info);
});
autoUpdater.on("error", (err) => {
  console.log("Error in auto-updater. " + err);
});
autoUpdater.on("download-progress", (progressObj) => {
  let log_message = "Download speed: " + progressObj.bytesPerSecond;
  log_message = log_message + " - Downloaded " + progressObj.percent + "%";
  log_message =
    log_message +
    " (" +
    progressObj.transferred +
    "/" +
    progressObj.total +
    ")";
  console.log(log_message);
});
autoUpdater.on("update-downloaded", (info) => {
  console.log("Update downloaded", info);
});
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
  autoUpdater.checkForUpdatesAndNotify();
  createWindow();
  app.on("activate", function () {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.

    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

Any help would be appreciated!

Answer 1

I had the same problem. I found this solution and it worked fine for me. Try changing your router file to:

import { createRouter, createWebHashHistory } from 'vue-router'

// ...

const router: Router = createRouter({
  history: createWebHashHistory(),
  routes,
});

// ...

It seems that Electron only works with WebHashHistory.