Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

la-bas's avatar

Ziggy's Route Function Undefined in Script Tags with SSR

In a typical Laravel Jetstream Inertia Vue setup, the route function from Ziggy is usually accessible globally (within script tags as well as template tags). However, I've encountered an issue with Inertia's SSR (server-side rendering). It seems that the route function is only recognized within the template tags of a Vue component. When I try using route inside the script (using scrip setup) tags, Inertia SSR--server throws an error stating that route is undefined.

Is this the expected behavior? Also, is there a workaround to use route within the script tags?

0 likes
10 replies
LaryAI's avatar
LaryAI
AI
2 years ago
Level 58

It sounds like you're facing a scope issue with the Ziggy route function when using Inertia's server-side rendering (SSR). This is a common issue due to the way global variables or functions are handled differently in client-side and server-side environments.

Problem Explanation

In a client-side environment, the route function from Ziggy is attached to the global window object, making it accessible throughout your JavaScript. However, in a server-side rendered application, there is no window object because the JavaScript is executed in a Node.js environment, not in a browser. This is likely why you're seeing the route function as undefined.

Solution

To solve this issue, you can manually import the route function in any component where it's needed, instead of relying on it being globally available. Here’s how you can do it:

  1. Install Ziggy and Import the Route Helper: Ensure that Ziggy is correctly installed and configured to generate routes for your JavaScript. You can install it using Composer and publish the routes if you haven't done so already.

    composer require tightenco/ziggy
php artisan ziggy:generate

  2. Import the Route Function in Your Component: In your Vue component, import the route function from the generated ziggy.js (or wherever your routes are exported). Use it directly in your script setup.

    import { route } from '@/ziggy';
import { defineComponent } from 'vue';

export default defineComponent({
    setup() {
        const someRoute = route('your.route.name');

        return {
            someRoute
        };
    }
});

  3. Using Route in SSR Context: When using SSR, ensure that any global or window-specific properties are checked or polyfilled. Since Ziggy typically attaches the route function to the window, you'll need to handle this manually as shown above.

Additional Tips

  • Check Server-Side Environment: Always check if your code is running in a server-side environment and handle it accordingly. This can prevent many issues related to undefined properties that are typically available only in the browser.
  • Debugging: Use console logs to check the availability of certain objects or functions at runtime, especially when dealing with SSR.

By following these steps, you should be able to use the route function within the script tags of your Vue components, even when using Inertia's SSR. This approach ensures that your application remains environment-agnostic and more robust.

Amaury's avatar

@la-bas Hi.

Is the @routes directive present within the <head> tag of your app template?

		<!-- Scripts -->
        @routes
        @vite(......)
        @inertiaHead

In your app.js file, did you registered Ziggy?

// ...
import { ZiggyVue } from '../../vendor/tightenco/ziggy';

// ....
createInertiaApp({
		// ...
		setup({ el, App, props, plugin }) {
        return createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue)
            .mount(el);
    },
		// ...
});
2 likes
la-bas's avatar

@Amaury Thank for your reply.

Yeah, @routes is present in the blade template and Ziggy is registered in app.js and, more importantly, in ssr.js. The error ONLY shows up when I run the Inertia ssr server.

gych's avatar

Did you also add Ziggy for ssr? Can you share your ssr.js file?

1 like
la-bas's avatar

Hi @gych!

Thanks for trying to help out—I really appreciate your effort!

Here is my ssr.js. I think it looks the same as the initial install version except for the addition of my translation helper.

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 { ZiggyVue } from '../../vendor/tightenco/ziggy';

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

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)
                .mixin(translation)
                .use(ZiggyVue, {
                    ...page.props.ziggy,
                    location: new URL(page.props.ziggy.location),
                });
        },
    })
);
gych's avatar

Try to use this as import for ZiggyVue

import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';
la-bas's avatar

@gych I tried, but unfortunatelly I just get this: RollupError: Could not resolve "../../vendor/tightenco/ziggy/dist/vue.m" from "resources/js/ssr.js"

gych's avatar

Ok as alternative you should be able to also access the route via the Inertia shared page props

import { usePage } from "@inertiajs/vue3";

console.log(usePage().props.ziggy);

Please or to participate in this conversation.