Laravel, Inertia - How make tabs logic

I have laravel10 prject, with vue3 and inertia

I have routers in web.php:

Route::resources([
    'roles' => RoleController::class,
    'users' => UserController::class,
]);

For example RoleController , index action:

 public function index()
    {
        return inertia('Roles/Index', [
            'roles' => Role::orderBy('id','ASC')->get()
        ]);
    }

I also have settings page:

Route::get('settings', [SettingsController::class, 'index'])->name('settings');

class SettingsController extends Controller
{
    public function index(){
        return inertia('Settings/Index');
    }
}

I want on settings page have tabs, like this

<div class="flex flex-col border rounded-md">
        <ul class="flex overflow-x-auto px-4 py-2 rounded-t-md bg-gray-200">
            <li class="cursor-pointer relative mr-2 px-3 py-2 text-sm font-medium text-gray-700 rounded-t-md"
                :class="{ 'bg-white font-bold text-gray-900': activeTab === 'roles' }"
            >
                   <Link :href="route('roles.index')">Roles</Link>

            </li>
            <li class="cursor-pointer relative mr-2 px-3 py-2 text-sm font-medium text-gray-700 rounded-t-md"
                :class="{ 'bg-white font-bold text-gray-900': activeTab === 'users' }"
            >
                   <Link :href="route('users.index')">Users</Link>
            </li>
        </ul>


        <div class="px-4 py-6 border-t">
            <div class="space-y-4">
                Active tab content....
            </div>
        </div>
    </div>

And i want if I click on 'Roles' - will show on 'Active tab content...' content from route('roles.index') ,if click on 'Users' - show content from route('users.index')

Is it possible? Tried to find solution like with <router-view>...

Or I need to use <slot> logic? And create like 'TabsLayout' and on pages 'Roles/Index , 'Users/Index'use that layout

What is best solution? Thanks

gych

2 years ago

Level 29

Create a TabsLayout with a slot like you already mentioned.

KonstantinZet

2 years ago

Level 1

@gych I thought maybe I can use layouts prop in my children components, like this:

export default {
    layout:[MainLayout,Settings],
}

But problem is how set activeTab

I tried to pass variable from children component to parent:

onMounted(() => {
    console.log('Child  onMounted');
    emit('setActiveTab', 'users');
    console.log('setActiveTab event emitted');
});

But how can I get that value in parent?

gych

2 years ago

Level 29

@KonstantinZet

Not sure if I completely understand your current approach but you can also use page/inertia shared props to make a variable available for both parent and children components without having to pass it as prop.

But why not use a slot? It seems like the easiest solution for this.

Please or to participate in this conversation.