How to use inertia SSR route() in setup

[drivedemon]

Ziggy version

1.4.6

Laravel version

8.83.14

Description

I follow jetstream document and try to start new project ssr with this command
php artisan jetstream:install inertia --ssr
ref document: https://jetstream.laravel.com/2.x/installation.html
what i need to do something for use route() in setup
still error when i start ssr server

ReferenceError: route is not defined

in webpack.ssr.mix.js

const mix = require('laravel-mix');
const webpackNodeExternals = require('webpack-node-externals');
const path = require("path");

mix.js('resources/js/ssr.js', 'public/js')
    .vue({
        version: 3,
        useVueStyleLoader: true,
        options: { optimizeSSR: true },
    })
    .alias({
        '@': 'resources/js',
        // ziggy: 'vendor/tightenco/ziggy/dist/index',   // <-- default config its working only in template tag
        ziggy: path.resolve('vendor/tightenco/ziggy/dist/vue'), // <-- change path to vue but not working too
    })
    .webpackConfig({
        target: 'node',
        externals: [webpackNodeExternals()],
    });

in ssr.js

import { renderToString } from '@vue/server-renderer';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import createServer from '@inertiajs/server';
import route from 'ziggy';
import { ZiggyVue } from 'ziggy';
import { Ziggy } from './ziggy';

const appName = 'Laravel';

createServer((page) =>
    createInertiaApp({
        page,
        render: renderToString,
        title: (title) => `${title} - ${appName}`,
        resolve: (name) => require(`./Pages/${name}.vue`),
        setup({ app, props, plugin }) {
            return createSSRApp({ render: () => h(app, props) })
                .use(plugin)
                .use(ZiggyVue, Ziggy) // <-- try to add this when i change alias path but not working too
                .mixin({
                    methods: {
                        route: (name, params, absolute) => {
                            return route(name, params, absolute, {
                                ...page.props.ziggy,
                                location: new URL(page.props.ziggy.url),
                            });
                        },
                    },
                });
        },
    })
);

Ziggy call and context

<template>
    <div>
        <h1>test</h1>
        <a :href="url">link</a>
        <a :href="route('home')">link</a> 
    </div>
</template>

<script>
export default {
    name: "Welcome",
    components: {
    },
    data() {
        return {
            url: route('home')
        }
    },
}
</script>

Ziggy configuration

{
    url: 'http://localhost:8000',
    port: 8000,
    routes: {
        home: {
            methods: {
                0: 'GET',
                1: 'HEAD'
            },
            uri: 'home'
        }
    }
}

Route definition

Route::get('/home', function () {
    return Inertia::render('Welcome', [
        'canLogin' => Route::has('login'),
        'canRegister' => Route::has('register'),
        'laravelVersion' => Application::VERSION,
        'phpVersion' => PHP_VERSION,
    ]);
})->name('home');

[bakerkretzmar]

Your setup looks correct to me, but in setup() there's no this so you can't use the mixin. Since Ziggy 1.4.4 though the route function is also injected everywhere by the plugin, so you should be able to use it in setup() like this:

setup() {
  const route = inject('route');
  // etc.
}

Let me know if that works! See also:

• How to use route() in setup() of vue 3 component? #454
• _ctx.route #470
• Full SSR support #431
• fix: make location configurable #432

[bakerkretzmar]

Oh I just realized your component isn't using setup() it's using data(), in which case this is even easier—it's this.route() inside the component script tags, and route() in the template.

[drivedemon]

Oh well, its working now from your suggestion.
thank you so much @bakerkretzmar

[drivedemon]

@bakerkretzmar working now. resolved inside component script tags with this.route()

[kskrlinnorth2]

I tried every solution I could find and always this same error ReferenceError: route is not defined when using ssr.

Ziggy: v1.5.0
Laravel: v10.7.1
inertiajs/vue3: 1.0.8

This is my ssr.js

import { createInertiaApp } from "@inertiajs/vue3";
import createServer from "@inertiajs/vue3/server";
import { renderToString } from "@vue/server-renderer";
import { createSSRApp, h } from "vue";
import { ZiggyVue } from "../../vendor/tightenco/ziggy/dist/vue.m";
import route from "../../vendor/tightenco/ziggy/src/js/index.js";
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";

import PageLayout from "./Layouts/PageLayout.vue";

const appName = "My App Name";

createServer((page) =>
  createInertiaApp({
    page,
    render: renderToString,
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => {
      const page = resolvePageComponent(
        `./Pages/${name}.vue`,
        import.meta.glob("./Pages/**/*.vue")
      );

      page.then((module) => {
        if (module.default.layout !== null) {
          module.default.layout = module.default.layout || PageLayout;
        }
      });

      return page;
    },
    setup({ App, props, plugin }) {
      const Ziggy = {
        ...page.props.ziggy,
        location: new URL(page.props.ziggy.location),
      };

      return createSSRApp({ render: () => h(App, props) })
        .use(plugin)
        .use(ZiggyVue, Ziggy)
        .mixin({
          methods: {
            route: (name, params, absolute, config = Ziggy) =>
              route(name, params, absolute, config),
          },
        });
    },
  })
);

PageLayout.vue where error is thrown:

<template>
    <div>
        <header>Header</header>
        <main><slot /></main>
        <footer>Footer</footer>
    </div>
</template>

<script setup>
import { computed } from "vue";

// This line throws error that route is not defined when using ssr build
const isMainDomain = computed(() => route().current("page.*") || route().current("account.*"));
</script>

Inertia middleware share method

return array_merge(parent::share($request), [
    'ziggy' => function () use ($request) {
        return array_merge((new Ziggy)->toArray(), ['location' => $request->url()]);
    },
]);

[bakerkretzmar]

Remove import route from "../../vendor/tightenco/ziggy/src/js/index.js"; and your entire .mixin(...), that's what the Vue plugin does. Inside <script setup> you always have to import or inject route, so add const route = inject('route'); and you should be good to go.