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
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.
npm install vendor/inertiaui/modal/vue
npm install vendor/inertiaui/modal/react
NPM Installation
You may also install the frontend packages separately.
npm install @inertiaui/modal-vue
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.
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)
}
})
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:
export default {
content: [
'./node_modules/@inertiaui/modal-vue/src/**/*.{js,vue}',
// other paths...
]
}
export default {
content: [
'./node_modules/@inertiaui/modal-react/src/**/*.{js,jsx}',
// other paths...
]
}