Laravel + Inertia js + Vue + Modal madness
The problem,
inertial doesn’t really allow you to do modals and it’s for a good reason, it really depends on what you need.
I’ve been working on this product for over 10 month and been really happy with Inertia. I’ve used modals all over the place and while simple single modals are fine, you sometimes want/need to have nested modals.
This becomes a bit burdensome to handle as then you have to start responding with json and the controllers need to know how to respond to to both json request and simple inertia request. You also have to deal with using sometimes inertia, sometimes fetch/axios.
The solution
This is a solution i’ve chosen. You might not like/want to do it this way.
Here’s what it will look like in the end:
Ok let’s go.
you can find all the related code examples in this gist
First of lets get a simple modal opening with inertia.visit(‘admin.posts.create’);
We need a route:
Ok now for the controller, I have custom form builder in vue/laravel, but you could simply pass in the component name or whatever info you want:
Here’s the OctaModal, again this is my custom implementation you can do whatever really:
Now for the magic, you need to add this to AppServiceProvider to your registerInertia. Look at Ping Crm for basic understanding, this is not a beginners tutorial.
Ok now for the frontend. In your Layout.vue add a component `<Modals />` you can find my `Modals.vue` in this gist. And the related StackModalForm.vue
This will get you half way there. You can now have simple non-nested modals, without having to deal with ajax requests and so on.
The nested modals
Now for those who need the nested modals, here we go, first we will add two more routes:
Have a look at PostThreadsController.php and OctaResponse.php we will also need to update our service provider:
Now all you need is to use the injected notifications and register the event you want to received and act upon it.
The basic gist:
Modals.vue watched both modals and response items, on modal added it simply adds a modal, on response item added it emits and event with the itemResponse.id and providing itemResponse.item as the payload.
Now you can add an event listener with the id, and do what you need to do with the response item.
Hope this helps!
