Custom App Mounting

If you need more refined control over the mounting process, contrary to the regular Inertia.js installation, you may ignore the renderApp helper method 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 call the initFromPageProps method with the props object. Lastly, you need to wrap the App component within the ModalStackProvider component:

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

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

        root.render(
            <ModalStackProvider>
                <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. In this file, you need to call the initFromPageProps method with the props object. Then, you need to wrap the App component within the ModalRoot component:

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

createInertiaApp({
    setup({ el, App, props, plugin }) {
        initFromPageProps(props) 

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