Skip to content

How to use inertia SSR route() in setup #563

@drivedemon

Description

@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');

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions