In this episode, we dive into how to pass props to modals in an Inertia.js-powered application. We start by explaining that modals behave just like normal Inertia pages when it comes to passing data—so all the usual patterns for passing props will apply.
We walk through a practical example where clicking on a note opens a modal displaying more details about that note. First, we create a new controller just for showing individual notes, set up the necessary route with route model binding, and craft a new modal component to display the note’s info.
Next, we update the notes list so each note is a clickable link that triggers our new modal. Passing the actual note data into the modal is straightforward: just use the with
method in the controller—just like you would for an Inertia page. This makes the note available as a prop in the Vue component, where you can easily use or display it.
Finally, we test it out: clicking a note opens the modal with all the right details. It’s super simple but powerful—and this same approach can be reused for any modal in your app that needs props!