Did you add ziggy middleware before inertia middleware?

The Middleware looks good.

Next step would be to implement something like this: https://github.com/tighten/ziggy#retrieving-ziggys-routes-and-config-from-an-api-endpoint

• First update the composer Ziggy package to latest version.
• Create a new route preferably in web.php to return Ziggy object.

// web.php

use Tightenco\Ziggy\Ziggy;

Route::get('api/ziggy', fn () => response()->json(new Ziggy));

• After Login is successful, in for example the onSuccess callback call the ziggy API and update the local data:

const submit = () => {
    form.post(route('login'), {
        onFinish: () => form.reset('password'),
        onSuccess: async () => {
          const response = await fetch("/api/ziggy", {
            headers: {
              Accept: "application/json",
            },
          });
          const routes = await response.json();
          
          // console.log(res);
      
          Ziggy.routes = routes.routes;
          Ziggy.defaults = routes.defaults;
        }
    });
};

• Ziggy is the global variable, that is already initizlized by @routes in your app blade. This updated Ziggy data is then used by the route function.

But, the only problem is when form.post() is submitted, it redirects to next page (e.g. dashboard), where you might see Error: Ziggy error: route 'dashboard' is not in the route list., as it has not been refreshed yet. Would be an awesome feature, if history route only changed after onSuccess is finished running.

So, the only good solution at the moment, is to instead use Axios or fetch for calling the login route. Then, return a success JSON response on login (instead of redirecting). Then call the ziggy refreshing API. Then manually perform visit to dashboard page. Something like this:

const submit = () => {
    axios.post(route('login'), form.data()).then(async (res) => {
      form.reset('password');
      axios.get("/api/ziggy").then((routes) => {
        Ziggy.routes = routes.data.routes;
        Ziggy.defaults = routes.data.defaults;

        Inertia.visit(res.data.redirect_to ?? '/dashboard');
        // Login controller returns ["redirect_to" => RouteServiceProvider::HOME]
      });
    })
};

Similar thing can be done after Logout as well.

I found a better way to do this, here's instructions:

1. Remove the @routes blade directive from resources/views/app.blade.php.
2. Install npm install ziggy-js
3. Removed everything related to ziggy in resources/js/app.js
4. Defined your "groups" in app/config/ziggy.php.

return [
    'groups' => [
        'guest' => [
            'login', 'password.request', 'password.email', 
			'password.reset', 'password.update',
        ],
        'auth' => ['*'],
    ],
];

1. Update app/Http/Middleware/HandleInertiaRequests.php with logic to determine what "group" to filter by.

//..
use Tightenco\Ziggy\Ziggy;

class HandleInertiaRequests extends Middleware
{
    // ...
    public function share(Request $request): array
    {
        $array = array_merge(parent::share($request), [
            'ziggy' => (new Ziggy('guest'))->toArray(),
        ]);

        if (auth()->guest()) {
            return $array;
        }

        return array_merge($array, [
            'ziggy' => (new Ziggy('auth'))->toArray(),
        ]);
    }
}

1. Create a new "route" composable: resources/js/Composables/Route.js

import { usePage } from '@inertiajs/inertia-vue3'
import route from 'ziggy-js'

export default function useRoute(
    name, params, absolute,
    config = usePage().props.value.ziggy
) {
    return route(name, params, absolute, config)
}

That's it! Example usage:

<template>
    <AppLayout>
        
        <div v-for="project in projects" :key="project.id">
            <Link :href="route('projects.show', project)">
                {{ project.name }}
            </Link>
        </div>
        
    </AppLayout>
</template>

<script setup>
import { Link } from '@inertiajs/inertia-vue3'
import route from '@/Composables/Route'
import AppLayout from '@/Layouts/AppLayout.vue'

defineProps({
    projects: Array,
})
</script>

Notes

1. If anyone knows how to use this globally, without having to import in every file, please let me know.

2. On step 5, I'm not sure how expensive it is to make these calls. You may want to consider caching them.

'ziggy' => (new Ziggy('guest'))->toArray() // cache this?
'ziggy' => (new Ziggy('auth'))->toArray() // cache this?

I believe it is easier than you think if you check the docs:

Source:

Ziggy Docs Filtering with groups

Filtering with groups

You can also define groups of routes that you want make available in different places in your app, using a groups key in your config file:

// config/ziggy.php

return [
    'groups' => [
        'auth' => ['auth.*'],
        'guest' => ['guest.*'],
    ],
];

Then, you can expose a specific group by passing the group name into the @routes Blade directive:

{{-- guest.blade.php --}}

@routes('guest')

To expose multiple groups you can pass an array of group names:

{{-- auth.blade.php --}}

@routes(['auth', 'guest'])

The only new thing is to change the root view of Inertia dynamically:

{{-- HandleInertiaRequests.php --}}

 public function rootView(Request $request)
    {
        // Bestimme das Layout basierend auf der Route oder einem anderen Kontext
        if ($request->routeIs('auth.*')) {
            return 'auth';
        }

        return 'guest';
    }

In your web.php:

Route::name('auth.')->group(function () {
All auth routes
});

Route::name('guest.')->group(function () {
All guest routes
});

The easiest way

// config/ziggy.php

return [
    'except' => ['_debugbar.*'], // Used for all authenticated users
    'groups' => [
        'guest' => ['login'], // The routes are for guests only
    ],
];

// app/Http/Middleware/HandleInertiaRequests.php

public function share(Request $request): array
{
    return [
        ...parent::share($request),
        'auth' => [
            'user' => $request->user(),
        ],
        'ziggy' => fn () => [
            ...(new Ziggy(auth()->guest() ? 'guest' : null))->toArray(),
            'location' => $request->url(),
        ],
    ];
}												

// app.blade.php

@routes(auth()->guest() ? 'guest' : null)

// app/Http/Controllers/Auth/AuthenticatedSessionController.php

public function store(LoginRequest $request): HttpResponse
{
    $request->authenticate();
    $request->session()->regenerate();
    return inertia()->location(route('home')); // Full page reload
}

public function destroy(Request $request): RedirectResponse
{
    Auth::guard('web')->logout();
    $request->session()->invalidate();
    $request->session()->regenerateToken();
    return inertia()->location(route('login')); // Full page reload
}