I working on an app and using Laravel Breeze Vue for the first time. Just some quick background, Laravel Breeze provides some quick scaffolding for authentication. When a user logs in, they are presented with a simple dashboard page. I have added a new link to this page as per below.
app/resources/js/Layouts/Authenticated.vue
<!-- Navigation Links -->
<div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
<BreezeNavLink :href="route('dashboard')" :active="route().current('dashboard')">
Dashboard
</BreezeNavLink>
<BreezeNavLink :href="route('client.index')" :active="route().current('client.index')">
Clients
</BreezeNavLink>
</div>
I have also created an Index.vue file at file path app/resources/js/Pages/Client/Index.vue. It looks like below:
<template>
<Head title="Clients" />
<BreezeAuthenticatedLayout>
<template #header>
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
Clients
</h2>
</template>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div class="p-6 bg-white border-b border-gray-200">
You're logged in!
</div>
</div>
</div>
</div>
</BreezeAuthenticatedLayout>
</template>
<script>
import BreezeAuthenticatedLayout from '@/Layouts/Authenticated.vue'
import { Head } from '@inertiajs/inertia-vue3';
export default {
components: {
BreezeAuthenticatedLayout,
Head,
},
}
</script>
I am using a route resource in my web.php file as per below. I have confirmed that client.index is an existing route via php artisan route:list.
//client routing
Route::middleware(['auth', 'verified'])->group(function() {
Route::resource('client', ClientController::class);
});
I am facing two problems. The first problem is that the link will not render in my navigation links. The second issue is that the Index.vue page will not render as well. I have tried doing npm run dev, npm run watch and clearing caches. None of these have worked. Please provide me with some insight on how to address these issues.
