How to make Tabs (tabulation) on inertia vue laravel with data loading from the database?

Question

Laravel

Friends, tell me how to make tabulation with loading data from the database. I use laravel + inertia vue and I want to display different categories of posts in tabs



on the screen, just a bootstrap component with tabs, here the tab title will be the category and in the body of the subcategory.
The question is how to load not separate pages into the body of the button, but simply change the data

Answer 1

front:
v-if + ajax
back:
Api resources

Answer 2

If you want to use the Inertia approach and do not want all the data to be loaded at once when accessing the controller method, then you need to use lazy loading and request certain keys in JS.
Something like:

public function index(TabRepository $repository)
{
    return inertia()->render('Index', [
        'default_tab' => fn () => $repository->getDefaultTabData(), // отдаст по умолчанию и по требованию
        'tab2' => Inertia::lazy(fn () => $repository->getTab2Data()), // отдаст только по требованию
        'tab3' => Inertia::lazy(fn () => $repository->getTab3Data()), // отдаст только по требованию
    ]);
}

<Link class="tab" href="route('blabla')" :only="['default_tab']">default_tab</Link>
<Link class="tab" href="route('blabla')" :only="['tab2']">tab2</Link>
<Link class="tab" href="route('blabla')" :only="['tab3']">tab3</Link>