Installation

There are two ways to install Inertia Modal. First, you can install the package with Composer. This package contains the Laravel package as well as the frontend packages. The advantage of installing it with Composer is that the frontend package is always in sync with the backend package. Alternatively, you can use npm to install the frontend package separately, but this requires you to manage the versions of the frontend and backend packages yourself.

Composer Installation

composer require inertiaui/modal:^2.0.0-beta.1

After installing the package, you can link the React or Vue package into your project. This will create a symlink in your node_modules directory to the package in the vendor directory.

Vue

npm install vendor/inertiaui/modal/vue

React

npm install vendor/inertiaui/modal/react

NPM Installation

You may also install the frontend packages separately.

Vue

npm install @inertiaui/modal-vue@^2.0.0-beta.1

React

npm install @inertiaui/modal-react@^2.0.0-beta.1

Inertia.js Configuration

Inertia Modal requires a root-component to be mounted in your app. You can do this in the main app.js file where you initialize your Inertia app using the createInertiaApp function. You only need to change the render function to include the renderApp method and pass the App component and props object to it.

Vue

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

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

React

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

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

        root.render(
            <App {...props} /> 
            renderApp(App, props) 
        );
    }
});

If you need more refined control over the mounting process, you should check out the Custom App Mounting documentation.

Tailwind Configuration

Inertia Modal uses Tailwind CSS for styling. You need to tell Tailwind to scan the package's source files so that the utility classes are included in your CSS output.

Tailwind CSS 4

In Tailwind CSS 4, add an @source directive to your CSS file:

Vue

@source "../node_modules/@inertiaui/modal-vue/src";

React

@source "../node_modules/@inertiaui/modal-react/src";

Tailwind CSS 3

If you're still on Tailwind CSS 3, include the package path in the content array of your tailwind.config.js file:

Vue

export default {
    content: [
        './node_modules/@inertiaui/modal-vue/src/**/*.{js,ts,vue}',
        // other paths...
    ]
}

React

export default {
    content: [
        './node_modules/@inertiaui/modal-react/src/**/*.{js,ts,jsx,tsx}',
        // other paths...
    ]
}