Custom App Mounting

If you need more refined control over the mounting process, contrary to the regular Inertia.js installation, you may ignore the withInertiaModal / withApp helper and perform the mounting manually.

React

In React, you need to make changes to the app.jsx file and use a Layout component that renders the ModalRoot component after your main content.

Create a Layout Component

First, create a Layout component that renders the ModalRoot component after your main content. In this example, we are naming the component ModalLayout.jsx:

import { ModalRoot } from '@inertiaui/modal-react'

export default function ModalLayout({ children }) {
    return (
        <>
            {children}
            <ModalRoot />
        </>
    )
}

Update app.jsx

First, import your new Layout component and set it as the layout for your pages:

createInertiaApp({
    resolve: (name) => resolvePageComponent(`./Pages/${name}.jsx`, import.meta.glob('./Pages/**/*.jsx'))
        .then(function (page) { 
            page.default.layout = (page => <ModalLayout children={page} />) 
            return page; 
        }), 
});

If you find this cumbersome, you can also use the setPageLayout helper function to set the layout for all pages:

import { setPageLayout } from '@inertiaui/modal-react'

createInertiaApp({
    resolve: (name) => resolvePageComponent(`./Pages/${name}.jsx`, import.meta.glob('./Pages/**/*.jsx'))
        .then(setPageLayout(ModalLayout)), 
});

Next, you need to wrap the App component within the ModalStackProvider component:

import { ModalStackProvider } from '@inertiaui/modal-react'

createInertiaApp({
    setup({ el, App, props }) {
        const root = createRoot(el);

        root.render(
            <ModalStackProvider> // [!code ++]
                <App {...props} />
            </ModalStackProvider> 
        );
    }
});

Vue

In Vue, it is a little bit simpler because you only need to make changes to the main app.js file. You need to wrap the App component within the ModalRoot component:

import { ModalRoot } from '@inertiaui/modal-vue'

createInertiaApp({
    setup({ el, App, props, plugin }) {
        return
            createApp({ render: () => h(App, props) }) 
            createApp({ render: () => h(ModalRoot, () => h(App, props)) }) 
            .use(plugin)
            .mount(el)
    }
})