app.js

import Main from "./assets/pro/main.js";
import ("../css/components.css");
import "highlight.js/styles/atom-one-dark.css"; /* Just for demo purpose only for highlighting code */

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
import NProgress from 'nprogress'
import { router } from "@inertiajs/vue3";

export default class Application extends Main {
    constructor() {
        super();

        if (window.hljs) {
            document
                .querySelectorAll("div.code-wrapper pre")
                .forEach((el) => hljs.highlightElement(el));
        }
    }
}

window.addEventListener("DOMContentLoaded", () => {
    window.App = new Application();
    window.dispatchEvent(new CustomEvent("app:mounted"));
});

createInertiaApp({
    resolve: name => {
        const pages = import.meta.glob('./views/Pages/**/*.vue', { eager: true })
        return pages[`./views/Pages/${name}.vue`]
    },
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .mixin({ methods: { route } })
            .mount(el)
    },
})

router.on('start', () => NProgress.start());
router.on('finish', () => NProgress.done());

We should need to mount this code in createInertiaApp

export default class Application extends Main {
    constructor() {
        super();

        if (window.hljs) {
            document
                .querySelectorAll("div.code-wrapper pre")
                .forEach((el) => hljs.highlightElement(el));
        }
    }
}

window.addEventListener("DOMContentLoaded", () => {
    window.App = new Application();
    window.dispatchEvent(new CustomEvent("app:mounted"));
});

So, when clicking on the navigation router then the code will be executed.