Reload Props

Just like regular Inertia pages, the props of a modal can be reloaded without a full page refresh. You can use the reload method from the slot props of the Modal component:

Vue

<script setup>
defineProps(['permissions', 'roles']);
</script>

<template>
    <Modal #default="{ reload }">
        <button @click="reload()">
            Reload all
        </button>
    </Modal>
</template>

React

export default function MyPage({ permissions, roles }) {
    return (
        <Modal>
            {({ reload }) => (
                <button onClick={reload}>
                    Reload all
                </button>
            )}
        </Modal>
    );
}

You can pass an object to the reload method to specify which props to reload:

reload({ except: ['roles'] })
reload({ only: ['permissions'] })

Alternatively, you can use the ref attribute to get a reference to the modal component and call the method on it.

Vue

<script setup>
import { ref } from 'vue';

const modalRef = ref(null);

function reloadPermissions() {
    modalRef.value.reload({ only: ['permissions'] });
}
</script>

<template>
    <Modal ref="modalRef">
        <!-- ... -->
    </Modal>
</template>

React

import { useRef } from 'react';

export default function MyPage({ permissions, roles }) {
    const modalRef = useRef(null);

    function reloadPermissions() {
        modalRef.current.reload({ only: ['permissions'] });
    }

    return (
        <Modal ref={modalRef}>
            {/* ... */}
        </Modal>
    );
}

Example with Nested / Stacked Modal

The reload function is great to combine with nested modals. For example, you can reload the parent modal when the child modal is closed:

Vue

<script setup>
defineProps(['roles']);
</script>

<template>
    <Modal #default="{ reload }">
        <select name="role_id">
            <option v-for="role in roles" :key="role.id" :value="role.id">
                {{ role.name }}
            </option>
        </select>

        <ModalLink href="/roles/create" @close="reload">
            Add Role
        </ModalLink>
    </Modal>
</template>

React

export default function MyPage({ roles }) {
    return (
        <Modal>
            {({ reload }) => (
                <>
                    <select name="role_id">
                        {roles.map(role => (
                            <option key={role.id} value={role.id}>
                                {role.name}
                            </option>
                        ))}
                    </select>

                    <ModalLink href="/roles/create" onClose={reload}>
                        Add Role
                    </ModalLink>
                </>
            )}
        </Modal>
    );
}

In this example, a new role can be created in the child modal. When the child modal is closed, the parent modal will reload the roles prop to reflect the new role so that it appears in the select dropdown.