Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

problem in running ssr when using vue vite and ziggy #569

Open
mahdisoftdev opened this issue Dec 6, 2023 · 0 comments
Open

problem in running ssr when using vue vite and ziggy #569

mahdisoftdev opened this issue Dec 6, 2023 · 0 comments

Comments

@mahdisoftdev
Copy link

mahdisoftdev commented Dec 6, 2023

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",
        ],
    },
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant