Installing Inertia from Scratch
This episode is for members only

Sign up to access "Installing Inertia from Scratch" right now.

Get started
Already a member? Sign in to continue
Playing
03. Client-side setup with Vue

Episodes

0%
Your progress
  • Total: 1h 7m
  • Played: 0m
  • Remaining: 1h 7m
Join or sign in to track your progress

Transcript

00:00
So we have Inertia set up on the server side, now it's time to move over to the client side to get this working. So the first thing that we're going to do is go ahead and install the Vue 3 package from Inertia. Inertia does allow you to work with things like React and Spelt as well,
00:14
but in our case we're just using Vue here. So we're going to go ahead and do an npm install on Inertia.js, not forgetting the at and Vue 3, so we're working with Vue version 3 here. We're going to wait for that to finish and that's going to pull in everything we need to get this working. Okay that's done, now later versions of Laravel, more recent versions of
00:34
Laravel come with Vite as a build tool, so we're going to go ahead and install the Laravel Vite plugin to help us out here and we'll see how we use this when we build up our app file in a minute. Okay so let's head over to that app file, this is just in resources.js. At the moment all this does is it pulls in the bootstrap file which is just next to this and that just contains some
00:58
standard stuff that Laravel comes with, like working with Laravel Echo here and pulling in Axios. We're going to kind of ignore that, we can keep bootstrap pulled in here if we need it, but let's go ahead and build up the app.js file that's going to get Inertia working and responding to our requests. So earlier we pulled in the Vue 3 package from Inertia that contains a create
01:22
Inertia app function which is going to allow us to basically just create our app out. So the first thing that we're going to do is go ahead and pull in create Inertia app and of course that comes from that package that we just pulled in here and then down here we're just going to go ahead and invoke that create Inertia app and then we pass any of the arguments through to this that we need to get
01:43
this working. One of these arguments is setup which is going to allow us to take in the element that this gets attached to, we get our app in here, we get any props in here and we get our plugin in here as well. Now what this is going to allow us to do is create out a standard Vue application within Inertia. So what we're going to do is go ahead and import in here create app and that should come from
02:10
Vue. Now we might need to go ahead and separately pull in Vue so let's do an npm install here on Vue and let's just try this again import create app and there we go from Vue. So now what we can do is just create a Vue app, a normal Vue app, this is how we would do this normally and then we can go ahead and mount this to a particular element. So we're going to go ahead and say mount
02:37
and then L here references the Inertia element, remember over on app.blade.php we have our Inertia element injected in here and that goes ahead and gets mounted to this. Now in between this what we want to do is use the Inertia plugin which gets injected into here. So we want to say create our app, use that plugin, that Inertia plugin and then mount it to the element on the page that we
03:01
want to see it on. So now we've done that we have npm run dev running let's just restart this npm run dev and let's just take a look and see if there is any difference here at all. Okay so it doesn't look like anything here has changed just yet, that is just because we haven't resolved the page component that we want to render. Now let's head back over to our web routes again and you can see we've got
03:25
rendering out this welcome page just here. Now at the moment Inertia doesn't know what to do with this or where to find the Vue component. We've put this inside of a pages directory, it just doesn't know where to find this. So what we want to do is tell this how to resolve this particular component. So in this we're going to get injected in the name of the component that we potentially
03:47
want to resolve. That comes from here, so this is the name that we get passed to into here. Now if we just do a console log on the name here for now, let's just see what happens when we try and reload this. So actually the reason that we are not seeing any of this rendered out just yet is because over in app.blade.php we're not actually pulling in any of our assets. So to do this we're going
04:12
to do this in the head. We're going to use the byte directive here to pull in the assets that we want to render. In our case it's resources.js and app.js. Let's see the difference that we get now. Okay great so welcome is now being console logged out. We know that that is the page that we want to render. Now we basically just need to resolve this component so Inertia knows how to find it and
04:34
also how to handle it as well. So to do this we can actually pull in the resolve page component from the Inertia helpers and that's under the Laravel Vite plugin package that we just pulled in. So we're going to go ahead and say import resolve page component and it doesn't look like it's there but let's go ahead and pull this in anyway and that is from the Laravel Vite plugin
04:57
and under Inertia helpers. Great so we can now use this to, as the name suggests, resolve that component that we want to use. What we're then going to do is go into the pages directory that we're adding all of our pages to just depending on how you structure your app and then we're going to go ahead and take the name which we know is welcome and we're going to add on the view
05:19
extension to this. Now we need to figure out how to find this so we're going to go ahead and use import metaglob and into here we're going to pass in the pattern for this to be found. So this is under pages and then we'll just say asterisk so anything under there and then anything with a view extension. So that should be enough to get this working. We head back over now and just give this
05:40
a refresh. We've got another error here that we just need to pull in the Vite view plugin which is absolutely fine so let's go ahead and pull this in. That tells us how to do this nicely so npm install on this and we will just wait for that to finish. We'll head over to the browser give this a refresh and it still doesn't work. Why is that? Well in the root of our directory we have a Vite
06:04
configuration file which we do need to modify to make this work. To do this it's pretty simple what we need to do is go ahead and import view from the Vite.js package that we just pulled in and then down here just underneath Laravel we want to add that as a new plugin and we can pass options to this but we're going to leave this empty for now. So now that we've done that we've got
06:26
view installed there we go we now have out a page with no errors. Now notice here we get a component is missing a template or render function. What we need to do here is within create app just go ahead and define out that render option and this is just a callback and in here we're just going to go ahead and pass in app and props and that should go ahead and render our page out. We just need to go ahead
06:50
and pull in this h from view and we should be good. There we go we've now got a welcome page rendered out. Now if we look down here what we just added h is short for hyperscript this is just a way that the view component is going to render out that html so we pass the app in here any props here and then that just renders out that component for us and of course gives us back html. So if we look at this
07:18
now under the elements tab you can see that we've got our structure that we created we've got this div id of app here which if we head back over to app.blade.php gets rendered out when we use this inertia directive and then just over here we have some information that's being passed in as a data attribute and then we have the actual content of our page in here. So now we pretty much just have
07:41
over on this welcome page a standard view component that we can just start working with so we can do pretty much anything we want inside of here. So for example we could go ahead and pass a prop through we head over to welcome here and we add an array in here with a message and let's just write hello in here for now just so it's something different to what we've already seen and we come over to our
08:04
welcome component we can set up our script here we can use script setup like we normally would within view and then we can go ahead and define the props that we want to get passed into here so that's going to be the message and that's a string so pretty much what you would normally expect to work with within view. So now what we can do is just go ahead and output that message
08:25
and what inertia has done is rendered out this page it has taken if we head over to web here the props that we want to pass through to that view component and we can pick these out here defining the type if we need to and then we can just render them out on the page as we have seen before so there we go we've got that prop passed down from the root level or from a controller
08:48
into that view component picked up and then rendered out onto the page. So our client is now set up and pretty much what we can do is just start to pass data down to our view components and start using that data here but we're going to look at some enhancements in the next section just to build this app out so it's a little bit more ready to start building on.

Episode summary

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!

Episode discussion

No comments, yet. Be the first!