Multiple Windows Support

[youngsdeveloper]

Hello.

I am trying to build an application using this template.

I need to show multiple windows in the applicacion.

I create a new .html, .vue and a .ts file for each window.

When NODE ENV is in production mode, i can choose the .html file, which choose .ts file.

But how i sould work with hot reloading mode?

Can i create multiple windows?

Thanks!

if (process.env.NODE_ENV === 'development') {
    const rendererPort = process.argv[2];
    optionsWindow.loadURL('http://localhost:${rendererPort}');
 }
  else {
    optionsWindow.loadFile(join(app.getAppPath(), 'renderer', 'index.html'));
  }

[Deluze]

But how i sould work with hot reloading mode?

HRM will work out of the box as long as you're connected to the Vite webserver. If you have 3 different windows (pages ?), simply set up Vue Router, and refer the window to different urls, e.g.:

localhost:${rendererPort}/about localhost:${rendererPort}/ localhost:${rendererPort}/login

etc.

[youngsdeveloper]

Thanks, its works now in hot reloading mode with this config.

import { createApp } from 'vue'
import './style.css';
import App from './App.vue'

import { createRouter, createWebHistory } from 'vue-router'; // Import createRouter and createWebHistory from vue-router

const routes = [
    {
      path: '/',
      component: () => import('./components/Controlador.vue') // Example route, replace with your actual component path
    },
    {
        path: '/horarios',
        component: () => import('./components/Horarios.vue') // Example route, replace with your actual component path
      },
    // Add more routes here as needed
  ];

const app = createApp(App);

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

app.use(router);

app.mount('#app');

For each window i add this code too

if (process.env.NODE_ENV === 'development') {
        const rendererPort = process.argv[2];
        optionsWindow.loadURL(`http://localhost:${rendererPort}/horarios`);
    }

But... What about Build Mode?

I need to send a .html file to each Window

This is my file structure

The problem is that windows html files is not in build folder and cant be accesed for Electron

How can i add this files to build process?

[Deluze]

By default, Vue is built from a single entrypoint (usually index.html) by Vite. In your situation, assuming you have the default Vite config, only 1 final html file will be generated.

As I see it there are a couple of ways how to solve this:

• Use a single entrypoint, e.g.: only horarios.html, load in the file, and send an IPC event to the renderer that passes down information on what route to load. There's already an example here, you'd just need to send the IPC event from main instead of the renderer. I think this is the most fitting solution, assuming it's 1 app, with different starting urls (?).
• Keep the multiple entry points (html files), and create a Multi-page build: https://vitejs.dev/guide/build.html#multi-page-app

[youngsdeveloper]

Thanks a lot!

Finally i keeped multiple entry points.

Here is an example if anyone need it too:

viteconfig.js

build: {
        outDir: Path.join(__dirname, 'build', 'renderer'),
        emptyOutDir: true,
        rollupOptions: {
            input: {
              opciones: './src/renderer/opciones/opciones.html',
              horarios: './src/renderer/horarios/horarios.html', 

            }
          }

    },

Loading HTML File with VUE Component

      optionsWindow.loadFile(join(app.getAppPath(), 'renderer', 'horarios','horarios.html'));

[sametcn99]

Thanks a lot!

Finally i keeped multiple entry points.

Here is an example if anyone need it too:

viteconfig.js

build: {
        outDir: Path.join(__dirname, 'build', 'renderer'),
        emptyOutDir: true,
        rollupOptions: {
            input: {
              opciones: './src/renderer/opciones/opciones.html',
              horarios: './src/renderer/horarios/horarios.html', 

            }
          }

    },

Loading HTML File with VUE Component

      optionsWindow.loadFile(join(app.getAppPath(), 'renderer', 'horarios','horarios.html'));

hey, i have multiple config files like this:

i can't find where i write

rollupOptions: {
            input: {
              opciones: './src/renderer/opciones/opciones.html',
              horarios: './src/renderer/horarios/horarios.html', 

            }
          }

i do everything same with you. it's working on dev mode but in production it shows a blank page. do you have any example repo?

[Deluze]

Double check that the configs are actually used. It's likely that your project never makes it into build/renderer/horarios/.... The way how you reference the file looks correct to me.

You can verify that the structure of the built app is correct by using the asar tool to unpack the generated asar file.