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'] })

Just like regular Inertia requests, you can also pass additional data and headers.

reload({ data: { email: '[email protected]' } })
reload({ headers: { 'X-Custom-Header': 'value' } })

Lifecycle Events

The reload method supports Inertia-style lifecycle events that you can use to track the reload state:

Vue

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

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

const loading = ref(false)

function reloadWithEvents(reload) {
    reload({
        only: ['permissions'],
        onStart: () => {
            loading.value = true
        },
        onSuccess: (response) => {
            console.log('Reload successful')
        },
        onError: (error) => {
            console.error('Reload failed', error)
        },
        onFinish: () => {
            loading.value = false
        },
    })
}
</script>

React

import { useState } from 'react'

export default function MyPage({ permissions }) {
    const [loading, setLoading] = useState(false)

    function reloadWithEvents(reload) {
        reload({
            only: ['permissions'],
            onStart: () => {
                setLoading(true)
            },
            onSuccess: (response) => {
                console.log('Reload successful')
            },
            onError: (error) => {
                console.error('Reload failed', error)
            },
            onFinish: () => {
                setLoading(false)
            },
        })
    }

    return (
        <Modal>
            {({ reload }) => (
                <button onClick={() => reloadWithEvents(reload)} disabled={loading}>
                    {loading ? 'Loading...' : 'Reload permissions'}
                </button>
            )}
        </Modal>
    )
}

The available lifecycle events are:

• onStart - Called when the reload request starts
• onSuccess - Called when the reload request succeeds (receives the Axios response)
• onError - Called when the reload request fails (receives the error)
• onFinish - Called when the reload request completes (regardless of success or failure)

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.