Skip to content

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

bash
composer require inertiaui/modal

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.

bash
npm install vendor/inertiaui/modal/vue
bash
npm install vendor/inertiaui/modal/react

NPM Installation

You may also install the frontend packages separately.

bash
npm install @inertiaui/modal-vue
bash
npm install @inertiaui/modal-react

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.

js
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)
    }
})
jsx
import { renderApp } from '@inertiaui/modal-react'

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

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

Tailwind Configuration

Inertia Modal uses Tailwind CSS for styling. You need to include the package path in the content array of your tailwind.config.js file:

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