The problem

When I click my Inertia Links, the URL changes in the browser but the page or Vue component does not render. However, when I click the link and reload the page manually, the page does get rendered.

Please help me! I don't even know how to debug this kind of problem! 🤔🙇

Explaining how to debug this would also be nice 🧡

What I've tried

• I tried to use the <Link>, <InertiaLink> and <inertia-link> components.
• I tried adding .component('inertia-link', Link) on createApp() in my main.ts file. (From the first answer of this thread: Vue component does not render when I use <inertia-link> tag)
• I tried changing my Laravel routes from Route::inertia('url', 'Component') to Route::get('url', function () { inertia('Component'); } )
• I tried another browser.
• I checked the console for any errors, but there are no errors there.

My code

web.php

<?php

use Illuminate\Support\Facades\Route;

Route::inertia('/', 'HomePage');
Route::inertia('/test', 'TestPage');

main.ts

import { createApp, h } from "vue";
import { createInertiaApp } from "@inertiajs/inertia-vue3";
import { InertiaProgress } from "@inertiajs/progress";

InertiaProgress.init({
    color: "#ffffff",
});

createInertiaApp({
    resolve: (name) => require(`./pages/${name}`),
    setup({ el, app, props, plugin }) {
        createApp({ render: () => h(app, props) })
            .use(plugin)
            .mount(el);
    },
});

Layout.vue

<template>
    <header>
        <ul>
            <li>
                <Link href="/">
                    Home
                </Link>
            </li>
            <li>
                <Link href="/test">
                    Test
                </Link>
            </li>
        </ul>
    </header>

    <main>
        <slot/>
    </main>
</template>

<script setup lang="ts">
import {Link} from "@inertiajs/inertia-vue3";
</script>

What shows up in my Developer Tools Request Log when I click the link:

Developer Tools Screenshot

Edit: This is probably because I did a faulty installation of Inertia, if you need a quick fix you could use a Laravel command that installs Inertia with Typescript for you.