Inertia + SSR + Ziggy

I investigated the issue on a new Laravel installation. Here's the thing: I can use route('dashboard') within <template> tag, but when used inside a <script setup>, I get an error: ReferenceError: route is not defined

Here is my listing for ssr.js:

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

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

createServer((page) =>
    createInertiaApp({
        page,
        render: renderToString,
        title: (title) => title ? `${title} - ${appName}` : appName,
        resolve: resolvePage,
        setup: ({ App, props, plugin }) =>
            createSSRApp({ render: () => h(App, props) })
                .use(plugin)
                .use(ZiggyVue, {
                    ...page.props.ziggy,
                    location: new URL(page.props.ziggy.location),
                }),
    }),
    { cluster: true },
);

function resolvePage(name: string) {
    const pages = import.meta.glob<DefineComponent>('./pages/**/*.vue');

    return resolvePageComponent<DefineComponent>(`./pages/${name}.vue`, pages);
}

this is default. Also I've published php artisan ziggy:generate. Nothing helps

LaryAI

9 months ago

Level 58

The issue you're experiencing is a common one when using Ziggy with Inertia.js and Vue 3, especially with SSR (Server-Side Rendering). The root cause is that the route helper provided by Ziggy is only available in the template context (via global properties), but not automatically in the <script setup> context.

Why does `route` work in `<template>`, but not in `<script setup>`?

In the <template>, Ziggy's route helper is injected as a global property (e.g., app.config.globalProperties.$route), so you can use it directly.
In <script setup>, you must explicitly import or inject it, because global properties are not automatically available.

Solution

1. Import `route` from Ziggy

In your <script setup>, import route directly from Ziggy:

import { route } from 'ziggy-js';

Now you can use route('dashboard') in your <script setup>.

2. If you need Ziggy's config (for SSR)

If you need to use the Ziggy config (for example, for named routes or URL generation that depends on the current location), you can also import Ziggy:

import { route, Ziggy } from 'ziggy-js';

If you need to pass the Ziggy config from the server (SSR), you can access it via your page props:

const ziggyConfig = defineProps(['ziggy']);

And then:

route('dashboard', undefined, undefined, ziggyConfig);

But in most cases, just importing route is enough.

3. Example Usage

<script setup>
import { route } from 'ziggy-js';

const dashboardUrl = route('dashboard');
</script>

4. Why doesn't `use(ZiggyVue)` make it available in `<script setup>`?

The use(ZiggyVue) plugin only injects the helper into the global Vue instance, which is accessible in templates or via getCurrentInstance().appContext.config.globalProperties in classic scripts. The <script setup> syntax is more isolated and does not automatically inherit global properties.