In this episode, we dive right in by setting up our Laravel app to use the Momentum Modal package with Inertia and Vue. First, we make sure you've got the starter kit or a fresh project running. Then, we go over installing the necessary backend (Composer) and frontend (NPM) dependencies for Momentum Modal.
Once the package is installed, we walk through adding the modal container component to your main layout file, so it's available anywhere in your app. Next, we set up and register the modal plugin in your app.js
, making sure everything is wired up so the modals work seamlessly on the client side.
We also talk about organizing our modal components and show how to create a dedicated modals
directory (though you can keep them wherever you prefer). Then, we cover how to configure the resolver so Vue knows where to find these modal components.
After all that's set up, we create our first named route that will trigger a modal—just like a regular Inertia page route, but with a twist! We create a basic modal component, wire it up, and explain the importance of the base route (what appears behind the modal overlay). Finally, we click through and see the modal in action—it's very basic, but working!
At the end of the episode, we're set up with a fully functioning modal system, ready to style and expand in future episodes.