The Flow of Pages and Page Props

In This Lesson

We'll talk about the flow InertiaJS follows when rendering pages, from AdonisJS to our Vue application. Then, we'll talk about passing props to our Vue page components.

Created by: @tomgobich
Published: 2 years ago

Join the Discussion 0 comments

Be the first to comment!

Transcript

getting back the actual page from Vue using Inertia. So let's hide our browser back away and let's start by jumping inside of our routes directory.
So command P and let's search for routes and hit enter there. So we can see that we are registering a route on slash.
So any request that goes to slash as this on method is a brisk route is going to render an Inertia page specifically looking for our home directory and it's going to pass it
a prop object with version six as the value. The first argument that we provide here is the page that we want to actually render out from our pages directory.
So by providing this page to the Inertia render method, it's going to be passed into our application. So if we dive into our application directory and take a look at our app.ts, the name being
provided here is the actual name that we're providing inside of the route. So we're going to get home inside of our app.ts for the name that we're trying to resolve here.
It's then this method's job to find and resolve that component, returning it back as the response of this method. This exists inside of our SSRTS as well.
You can see we have that same resolve function. So we pass the name into the render method for Inertia. Inertia then uses our resolve function to actually resolve that component from our pages.
And then this is then used and wrapped with Inertia's bindings to provide in the initial state data that we are passing as props directly from the render call, which then come through
inside of our component itself, where we can define the props and get access to it so that we can render it out or do whatever we need to with that prop data.
So here you can see it's directly inside of our title, AdonisJS, then it's plopping that version of 6 times Inertia times View.js.
So if we open our browser back up, you can see that prop directly right here where we see that 6. So this is coming through all the way from the AdonisJS render method or Inertia and
being passed all the way through to the props of our page where we are then rendering it out. Furthermore, if you have the View DevTools installed inside of your browser, you can take a look at that directly inside of that DevTools panel.
So here we see the root of our application, and then we have an Inertia component, which takes in the initial props and component, binds that all together to render out our application
and passes that information into the page where we can then readily make use of all of that data. So inside of our page of home, you can see that we're getting back the props with version
6. And if we take a look at the Inertia component, we can see that that's also coming into the initial page data via props version 6 right there.
So it's really this Inertia component that's the glue on the front end side that's allowing us to pass data from AdonisJS into our view application.
Now the initial data that Inertia is using via this component right here is actually being provided via AdonisJS directly on the mounting element.
So if we take a look at the inspect panel, here's our mounting element with the idea of app. If you take a look at the data page, this is specifying what component it is that we want
to use, the version, as well as the prop information and the URL that we are at. The Inertia component is then reading this data page attribute as an object, parsing it,
and determining this stateful information that's then being passed into our home component. So that's really the flow of what's going on there whenever we're rendering things out.
If we hide our browser back away, let's take a look at this inside of a non-brisk route. So if we don't use this shorthand syntax here, and instead we do router.get, and let's add
a route for, say, register. We have an async handler that takes in our CTX, our HTTP context, and directly on that HTTP context we now have an Inertia property.
This Inertia property contains several things. We can add lazy data, we can specify an external location to redirect to, render a specific
component page, which is the same as this renderInertia method for the shorthand brisk routes, and then we can also share data, just the same as we could with EdgeJS, to our view app.
So what we're looking to do is render out a new page, so we'll do render here, and we'll put our page inside of an auth folder and call it register.
If we wanted to, we could, just the same as the brisk renderInertia method, we could also pass in page props via the second argument, and you might also see that we have a view props option.
Page props are passed directly into our view application or whatever front-end client you are using.
View props are passed into the EdgeJS page that ultimately renders out the mounting element for our client application.
So view props are used directly inside of the resources, InertiaLayout, or whatever layout it is that you're using for your application.
So any view props that we provide are accessible inside of this file, whereas page props are accessible inside of our page components. So that's the difference between those two.
Now, before we give this a test run, we also want to return that rendered result back, and then we'll give that a save, jump inside of our pages directory, right-click it, new
file, let's create an auth directory, and a register.vue file inside of there. But right now we can just specify a template with an h1 of register here.
We'll give that a save, jump back inside of our browser, and replace our URL with slash register to request that route, where we now see our register component rendering out our register text right there.
Furthermore, since our app has been reinstantiated, we need to close out our DevTools and open it back up to reload it, where we can now see our register component is being used as our page.
We don't have any stateful information being used, so the stateful information for the component is completely empty. But if we take a look at Inertia, it still has all of our initial page information.
If we were to jump back inside of our text editor, provide some stuff as our props, give that a save, jump back into our browser, see that did a refresh, our Inertia component
now has props with stuff here inside of it that are then passed inside of our register component. And since we don't have it defined as a prop, it's being added to our attributes.
So let's jump back into our text editor, jump inside of our register view, where we can now add a setup script and specify that we want to use the language of TypeScript.
Then we can use the view global define props to define our prop data. And when using TypeScript, you can use the define props and give it a specific type, and
it will automatically register that back to the props. So we can provide an object in here with stuff of type screen to register the prop data,
and we can then plop that directly inside of our template because stuff will now be registered as a prop inside of our actual register page.
So if we jump back into our browser, you can see it already refreshed and our component has been reinitialized. So we need to restart our dev tools once more, inspect, jump back into there, where we now
see register with props, not attributes anymore, but props of stuff here. Furthermore, if we take a look back at our mounting element, you can see that this is
updated as well, where props is stuff here. Now, an important distinction to make is that the mounting element is only ever going to contain the initial data from the initial load.
The same is true with the initial data inside of the inertia component. So initial page data right here, this will not change on subsequent requests.
And we'll take a look at how that's updated later on.

Building with AdonisJS & Inertia

91 Lessons

14h 3m

Getting Started

The Basics

Working with Forms

Database & Project Scaffolding

Authentication & Onboarding

The User's Organizations

Difficulties, Statuses, & Access Levels

Courses

Modules & Lessons

Settings

Organization Members

Authorization

InertiaJS 2

Stop losing your best ideas!

Use our integrated note feature to capture and organize your key insights. Take a note at any timestamp and jump instantly back to that moment in the video with a single click.