It looks interesting. But how can I make vue open the page as a modal? Using additional resolve?

My controller:

class RoleController extends Controller
{
    public function index(GetRolesQuery $query, GetRoleDictionariesQuery $dict): Response
    {
        $this->authorize('viewAny', Role::class);

        return Inertia::render('roles/pages/RolesIndex', [
            'roles' => $query->handle(),
            'filters' => request()->only('search'),
            'dictionaries' => $dict->handle(),
            'modal' => null,
        ]);
    }

    public function create(GetRolesQuery $query, GetRoleDictionariesQuery $dict): Response
    {
        $this->authorize('create', Role::class);

        return Inertia::render('roles/pages/RolesIndex', [
            'roles' => $query->handle(),
            'filters' => request()->only('search'),
            'dictionaries' => $dict->handle(),
            'modal' => [
                'type' => 'create',
                'backlink' => route('roles.index'),
            ],
        ]);
    }

    public function store(CreateRoleAction $action, StoreRoleRequest $request): RedirectResponse
    {
        $this->authorize('create', Role::class);

        $result = $action->handle($request->validated());

        Flash::success("Роль {$result->title} успешно создана");

        return redirect()->route('roles.index');
    }

    public function edit(GetRolesQuery $query, GetRoleDictionariesQuery $dict, Role $role): Response
    {
        $this->authorize('update', $role);

        return Inertia::render('roles/pages/RolesIndex', [
            'roles' => $query->handle(),
            'filters' => request()->only('search'),
            'dictionaries' => $dict->handle(),
            'modal' => [
                'type' => 'edit',
                'role' => $role->load('permissions'),
                'backlink' => route('roles.index'),
            ],
        ]);
    }

    public function update(UpdateRoleAction $action, UpdateRoleRequest $request, Role $role): RedirectResponse
    {
        $this->authorize('update', $role);

        $result = $action->handle($role, $request->validated());

        Flash::success("Роль {$result->title} успешно обновлена");

        return redirect()->route('roles.index');
    }

    public function destroy(DeleteRoleAction $action, Role $role): RedirectResponse
    {
        $this->authorize('delete', $role);

        try {
            $action->handle($role);

            Flash::success("Роль {$role->title} успешно удалена");
        } catch (\DomainException $e) {
            Flash::error($e->getMessage());
        }

        return redirect()->route('roles.index');
    }
}

Vue page:

<script setup>
    const props = defineProps({
        roles: {
            type: Object,
            default: () => ({})
        },
        modal: {
            type: Object,
            default: () => ({})
    })

    function createRecord() {
        router.get(
            route('roles.create', props.filters),
            {},
            {
                preserveScroll: true
            }
        )
    }

    function editRecord(item) {
        router.get(
            route('roles.edit', { role: item.id, ...props.filters }),
            {},
            {
                preserveScroll: true
            }
        )
    }

    function deleteRecord(item) {
        router.delete(route('roles.destroy', { role: item.id }), {
            preserveScroll: true
        })
    }

    function closeModal() {
        router.get(
            route('roles.index', props.filters),
            {},
            {
                replace: true,
                preserveScroll: true
            }
        )
    }
</script>

<template>
	<example-table :items="roles"  :items-length="roles.total"/>
	 <roles-modal v-if="modal" :modal="modal" @close="closeModal" />
<template/>

This works, but this approach reloads the page, and if the table is complex or has a lot of data, it takes significantly longer to load.

As I mentioned above, I tried using Ajax requests, but then the application starts using two approaches: one is Ajax, the other is Inertia.

This works, but this approach reloads the page and if the table is complex or there is a lot of data, it takes a noticeable amount of time to load.

I have also tried loading additional data using only[] and preserveUrl, but when validation errors occur, the page breaks instantly due to Laravel's back() function.

Yes, I need a more detailed explanation. I use it. Select you have users, you have roles (space). I need dictionaries with roles to be loaded to the main page via the controller for subsequent filtering. Using the create/edit route, I load either an empty modal or a modal with props embedded in it by sending Inertia::render to the same page with additional modal array data. How to do all these routes correctly and how to organize the architecture and code correctly? I noticed that when loading the create/edit pages, if we upload all the data again, there is a delay.

How to make modal windows based on inertia v2 correctly? I tried making them with an ajax request. I also tried to use the philosophy of inertia and return all the page data through the passes, using the same page for rendering. But I still can't figure out how to simplify this process.