Docs

demo-app/resources/js/app.js

@@ -13,7 +13,7 @@ createInertiaApp({
     title: (title) => `${title} - ${appName}`,
     resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
     setup({ el, App, props, plugin }) {
-        return createApp({ render: () => h(ModalRoot, [h(App, props)]) })
+        return createApp({ render: () => h(ModalRoot, () => h(App, props)) })
             .use(plugin)
             .use(ZiggyVue)
             .mount(el)

docs/installation.md

@@ -16,7 +16,44 @@ npm install @inertiaui/modal-react
 
 There's no backend package required for Inertia Modal, so you don't need to install anything using Composer.
 
-### Tailwind Configuration
+## Inertia.js Configuration
+
+Inertia Modal requires a `ModalRoot` 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 `ModalRoot` component and pass the `App` component as a child of `ModalRoot`:
+
+```js
+import { ModalRoot } from '@inertiaui/modal-vue' // [!code ++]
+
+createInertiaApp({
+    setup({ el, App, props, plugin }) {
+        return
+            createApp({ render: () => h(App, props) }) // [!code --]
+            createApp({ render: () => h(ModalRoot, () => h(App, props)) }) // [!code ++]
+            .use(plugin)
+            .mount(el)
+    }
+})
+```
+
+Alternatively, you can include the `ModalRoot` component in the [layout template](https://inertiajs.com/pages#persistent-layouts) of your app:
+
+```vue
+<script setup>
+import { ModalRoot } from '@inertiaui/modal-vue'
+</script>
+
+<template>
+    <div>
+        <!-- Your layout here -->
+        <slot />
+    </div>
+
+    <ModalRoot />
+</template>
+```
+
+## 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:
 
@@ -42,7 +79,7 @@ export default {
 
 :::
 
-### Vite Configuration
+## Vite Configuration
 
 There's some additional configuration required to use Inertia Modal. In the `vite.config.js` file, add the following config to the root of the configuration object:
 

vue/src/Modal.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { inject, onBeforeUnmount, ref, computed, useAttrs, onMounted, nextTick } from 'vue'
+import { inject, onBeforeUnmount, ref, computed, useAttrs, onMounted } from 'vue'
 import { TransitionRoot, TransitionChild, Dialog } from '@headlessui/vue'
 
 import { getConfig, getConfigByType } from './config'

vue/src/ModalRoot.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onBeforeMount } from 'vue';
+import { onBeforeMount } from 'vue'
 import { useModalStack } from './modalStack'
 import ModalRenderer from './ModalRenderer.vue'