problem in running ssr when using vue vite and ziggy

[mahdisoftdev]

hellow. when i run php artisan inertia:start-ssr command in my terminal the ssr server work fine but when i reload browser page this error was showed: TypeError: _ctx.$route is not a function at file:///I:/Work/Code/Web/Khyaboon/bootstrap/ssr/ssr.js:47628:20 at renderComponentSubTree (I:\Work\Code\Web\Khyaboon\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:683:9) at renderComponentVNode (I:\Work\Code\Web\Khyaboon\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:631:12) at ssrRenderComponent (I:\Work\Code\Web\Khyaboon\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:86:10) at file:///I:/Work/Code/Web/Khyaboon/bootstrap/ssr/ssr.js:48349:13 at renderComponentSubTree (I:\Work\Code\Web\Khyaboon\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:683:9) at renderComponentVNode (I:\Work\Code\Web\Khyaboon\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:631:12) at renderVNode (I:\Work\Code\Web\Khyaboon\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:743:14) at renderComponentSubTree (I:\Work\Code\Web\Khyaboon\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:698:7) at renderComponentVNode (I:\Work\Code\Web\Khyaboon\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:631:12) and here is my app.js

import "./bootstrap";
import "../css/app.css";
import { createApp, h } from "vue";
import Toast from "vue-toastification";
import { createInertiaApp } from "@inertiajs/vue3";
import mitt from "mitt";
import Layout from "./Components/Layout.vue";
import VitrineLayout from "./Components/Vitrine/Layout.vue";
import "vue-toastification/dist/index.css";
import OpenLayersMap from "vue3-openlayers";
import "vue3-openlayers/styles.css";
import DatePickerClient from "./Plugins/DatePicker.client";

import route from "ziggy";
import { ZiggyVue } from "./ziggy";

createInertiaApp({
    resolve: (name) => {
        const pages = import.meta.glob("./Pages/**/*.vue", { eager: true });
        let page = pages[`./Pages/${name}.vue`];
        page.default.layout = name.startsWith("Panel/") ? Layout : VitrineLayout;
        return page;
    },
    setup({ el, App, props, plugin }) {
        const emitter = mitt();
        const VueApp = createApp({ render: () => h(App, props) });
        VueApp.use(Toast, {});
        VueApp.use(OpenLayersMap);
        VueApp.use(DatePickerClient);

        // VueApp.config.globalProperties.$route = route;

        VueApp.provide("emitter", emitter);
        VueApp.use(plugin);
        VueApp.mixin({ methods: { route } });
        VueApp.mount(el);
    },
});

and my ssr.js

import "../css/app.css";
import { renderToString } from "@vue/server-renderer";
import { createSSRApp, h } from "vue";
import { createInertiaApp } from "@inertiajs/vue3";
import mitt from "mitt";
import Layout from "./Components/Layout.vue";
import VitrineLayout from "./Components/Vitrine/Layout.vue";
import createServer from "@inertiajs/vue3/server";

import route from "ziggy";
import { ZiggyVue } from "./ziggy";

createServer((page) =>
    createInertiaApp({
        page,
        render: renderToString,
        resolve: (name) => {
            const pages = import.meta.glob("./Pages/**/*.vue", { eager: true });
            let currentPage = pages[`./Pages/${name}.vue`];
            currentPage.default.layout = name.startsWith("Panel/") ? Layout : VitrineLayout;
            return currentPage;
        },
        setup({ App, props, plugin }) {
            const emitter = mitt();
            const VueSSRApp = createSSRApp({
                render: () => h(App, props),
            });

            // VueSSRApp.config.globalProperties.$route = route;

            VueSSRApp.provide("emitter", emitter);
            VueSSRApp.use(plugin)
            VueSSRApp.mixin({methods: {route}});

            return VueSSRApp;
        },
    })
);

and my vite.config.js

import path from "path";
import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
    plugins: [
        laravel({
            input: ["resources/css/app.css", "resources/js/app.js"],
            ssr: "resources/js/ssr.js",
            refresh: true,
        }),
        vue({
            template: {
                compilerOptions: {
                    isCustomElement: (tag) => {
                        ["DatePicker"].includes(tag);
                    },
                },
            },
        }),
    ],
    resolve: {
        mainFields: ["browser", "module", "main", "jsnext:main", "jsnext"],
        alias: {
            "@/": "/resources/js",
            ziggy: path.resolve("vendor/tightenco/ziggy/dist/vue.es"),
        },
    },
    ssr: {
        noExternal: [
            "@splidejs/vue-splide",
            "@photo-sphere-viewer/core",
            "date-fns",
            "vue-toastification",
            "lightgallery",
            // "vue3-persian-datetime-picker",
            // "@vueup/vue-quill",
            // "quill",
            // "vue-simple-range-slider",
            // "vue-star-rating",
            // "vue3-openlayers",
        ],
    },
});