Inertia Links open in a iframe modal

[nikoz84]

Versions:

"@inertiajs/inertia": "^0.8.6", "@inertiajs/inertia-vue": "^0.5.6",

Describe the problem:

I´m a Laravel and Vue app, and when add the inertia-link in the template the links open in a iframe.

Steps to reproduce:

public function getBySlug($slug)
    {
        $canal = Canal::with(['categories', 'appsCategories'])
        ->where('slug', $slug)->get()->first();
        $canal = 'dd';

        if (!$canal) {
            return abort(404);
        }

        return Inertia::render('Canal', [
            'canal' => $canal
        ]);;
    }

Routes

Route::get('/', [\App\Http\Controllers\Web\HomeController::class, 'index'])->name('web.home');
Route::get('/galeria', [\App\Http\Controllers\Web\HomeController::class, 'galeria'])->name('web.galeria');
Route::get('/sobre', [\App\Http\Controllers\Web\HomeController::class, 'sobre'])->name('web.sobre');
Route::get('/{slug}', [\App\Http\Controllers\Web\CanalController::class, 'getBySlug'])->name('web.canais');

Inertia links in the Default Layout

<inertia-link href="/">
    Inicio
  </inertia-link>
  <inertia-link href="/tv-anisio-teixeira">
    Tv Anísio Teixeira
  </inertia-link>

  <inertia-link href="/galeria">Galeria</inertia-link>
  <inertia-link href="/sobre">Sobre</inertia-link>

[reinink]

This is what happens when you don't return an Inertia response from the <inertia-link> endpoint. All Inertia requests MUST return an Inertia response, otherwise they are shown in a modal like this. This is core to how the library works. 👍

[nikoz84]

Thank you man, how can i help in your proyect??

[nikoz84]

in a live reload not work but without npm run watch command the app works

[merijnponzo]

I have the same problem, in development evertything works fine. But in production it's opening in a modal when clicking my home link

  <inertia-link class="logo__link" href="/"></inertia-link>

click the logo 'dammes kieft' (work in progress, my first inertia + wordpress portfolio site! ;-) https://dammes.ponzoblocks.nl/

There is nothing mentioned about popups or modals within: https://inertiajs.com/links

[nikoz84]

Hi, how u serve the assets?? with mix() or assets() ?? because the mix add caracters for cache your files for example. app?oajsd12asd31asd21a3sd maybe this string it cause the version crash

[merijnponzo]

Hi, i use Vitejs to build my assets, the manifest output is enqueued to the header. The site isn't finished yet but for sure I cant put it to production this way :-)

But it is somehow cache related, when I login to wordpress and navigate to the burger menu of my site everything works fine.

In production, but logged in

[merijnponzo]

Okay, It appears that spinupwp (my hosting environment) has another toggle 'disable page cache' within the hosting admin, this has nothing to do with wordpress but simply adds headers trough the nginx config.

https://spinupwp.com/doc/customizing-page-cache-exclusions/ It is possible that the Fastcgi-Cache header not works well with inertia, or other headers ?

[Color-Kat]

I have same problem. Reinink says need to return inertia response. But i don't know what the respond is) I use react with inertia. And my links open in iframe same. Moreover, Inertia.get, delete ... open same iframe. How to fix it?

[f76b91e8f618]

Also check if you are using some proxy, as in my case

[n1xn]

Modifying the response in AuthenticatedSessionController to return Inertia::location(RouteServiceProvider::HOME) solved it for me.

[fh32000]

I'm also having the same problem. I'm using the spatie/laravel-responsecache library to cache my responses, and when I enable caching, the links open in an iframe. When I disable caching, the links work as expected.

I'm using Laravel 10.15.0 and Vue 3.2.36 vite 3.2.2 vuetify 3.0 @inertiajs/inertia 0.11.1

[fh32000]

link with https://github.com/spatie/laravel-responsecache/discussions/448