In this episode, we move on from the server-side setup of Inertia and start putting together the client-side part of our app using Vue 3. The first thing we do is install the necessary packages: we grab Inertia for Vue 3, and since Laravel uses Vite for builds these days, we also bring in the Laravel Vite plugin.
Next, we head over to our main JavaScript entry file (typically resources/js/app.js
) and start setting up the Vue app. We import createInertiaApp
from Inertia, set up the basic app structure, and talk about how Inertia hooks into Vue by using a setup
function. This is where our Vue app gets mounted to the Inertia element that's injected into the main Blade layout file.
To make sure Vue is actually included, we install it (if it's not already there) and set up the app using Vue's createApp
and the Inertia plugin. We also update our Blade template to use the @vite
directive to load the compiled JavaScript assets properly, fixing the issue where our Vue pages weren't showing.
We then handle dynamic page resolution—letting Inertia know where to find Vue components for each page—using the resolvePageComponent
helper and some handy glob imports. We also install the Vite Vue plugin and add it to our vite.config.js
file to get everything compiling and hot-reloading nicely.
There was a little hiccup with a missing render function, which we fixed by using h()
from Vue to render components. After that, everything displayed as expected!
Finally, we demonstrate how props get passed from our Laravel routes into the Vue components and how you can access and display them within Vue, just like any typical Vue app. With the client-side now wired up, we're in a great spot to start building out more interactivity. Next up, we'll look at some enhancements to make our app more robust and production-ready!