If you want to turn the links into a dynamic nested component you can do it like this: Nav.vue

<script setup>
import NavLink from "@/Shared/NavLink.vue";
</script>

<template>
    <nav class="border border-dashed border-gray-500 p-4">
        <ul class="list-disc list-inside">
            <NavLink text="home" />
            <NavLink text="users" />
            <NavLink text="settings"" />
            <NavLink text="logout" method="post" :data="{ foo: 'bar' }" />
        </ul>
    </nav>
</template>

NavLink.vue

<script setup>
import {Link, usePage} from '@inertiajs/vue3'

function currentRoute() {
    return usePage().props.routeName;
}

defineProps({
    text: String,
    method: String,
    data: Object,
});
</script>

<template>
    <li>
        <Link
            v-if="method === 'post'"
            :href="route(text)"
            as="button"
            type="button"
            :method="method"
            :data="data"
            class="text-blue-500 hover:underline capitalize"
            :class="{ 'font-bold underline': currentRoute() === text }"
        >
            {{ text }}
        </Link>
        <Link
            v-else
            :href="route(text)"
            :data="data"
            class="text-blue-500 hover:underline capitalize"
            :class="{ 'font-bold underline': currentRoute() === text }"
        >
            {{ text }}
        </Link>
    </li>
</template>

Then you just need to add the routeName object to be passed to the app, via the HandleInertiaRequests.php middleware, this can be done with the following code: app/Http/middleware/HandleInertiaRequests.php

<?php

namespace App\Http\Middleware;

use Illuminate\Http\Request;
use Inertia\Middleware;
use Tightenco\Ziggy\Ziggy;

class HandleInertiaRequests extends Middleware
{
    /**
     * The root template that is loaded on the first page visit.
     *
     * @var string
     */
    protected $rootView = 'app';

    /**
     * Determine the current asset version.
     */
    public function version(Request $request): string|null
    {
        return parent::version($request);
    }

    /**
     * Define the props that are shared by default.
     *
     * @return array<string, mixed>
     */
    public function share(Request $request): array
    {
        return array_merge(parent::share($request), [
            'ziggy' => function () use ($request) {
                return array_merge((new Ziggy)->toArray(), [
                    'location' => $request->url(),
                ]);
            },
            // get the previous url & pass it to the view, via Inertia
            'urlPrevious' => url()->previous(),
            // get the current route name & pass it to the view, via Inertia
            'routeName' => function () {
                return request()->route()->getName();
            },
        ]);
    }
}

Caveat: You need to have Ziggy installed & configured for this to work, so if you used Laravel Breeze as a starter scaffold for this series you should have Ziggy configured already. Ziggy is very useful to make the route() helper available in your Vue components, so your href's can all be dynamically generated by your routes.

Active Links