Laravel + Vue + Inertia + Ziggy + SSR: Routing not working

Hello everybody,

I really need some help to get that combination working. I‘ve spent hours trying all the solutions on google etc. but I can‘t get it work.

I always get the following error when accessing my app using the ssr server:

ReferenceError: route is not defined

This happens because I need the current route in my vue component.

const currentRoute = route().current();

The normal (non ssr) version works perfect.

So what‘s the correct, modern way to make the routes work in the ssr version?

This is/was my ssr.js (I removed my different tries for now, I know it's not working this way):

import { createSSRApp, h } from 'vue';
import { renderToString } from '@vue/server-renderer';
import { createInertiaApp } from '@inertiajs/vue3';
import createServer from '@inertiajs/vue3/server';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { createPinia } from 'pinia';

// import route from 'ziggy-js';
// import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';
// import { Ziggy } from '@/ziggy';

const appName = import.meta.env.VITE_APP_NAME || 'Laravel';

//create a Pinia store
const pinia = createPinia();

createServer((page) =>
    createInertiaApp({
        page,
        render: renderToString,
        title: (title) => `${title} - ${appName}`,
        resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
        setup({ App, props, plugin }) {
            return createSSRApp({ render: () => h(App, props) })
                .use(plugin)
                .use(ZiggyVue, {
                    ...page.props.ziggy,
                    location: new URL(page.props.ziggy.location),
                })
                .use(pinia);
        },
    })
);

And my vite.config.js:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import svgLoader from 'vite-svg-loader';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            ssr: 'resources/js/ssr.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    svgLoader(),
    ],
});

Could someone please help me?

I am "just" a creative person and no pro developer so sometimes I need a little longer to understand all these modern tool stacks. Please be patient. :)

Thank you so much!