Extracting a shared component can be incredibly useful, but in its current state, we do have one problem. Have a look. In my browser, if I open up Vue DevTools, you'll see that the layout is actually a child of our Page component, not the other way around. So what this effectively means is every time I browse from page to page, the layout is being destroyed and rebuilt. Now, if that's confusing, let me give you a little example here. In my Layout component, let's do something that changes the state. So we'll make this as simple as my app, but I will store it in an input.

And luckily, it's really easy to implement. The solution is to effectively reverse it. So rather than the layout being a child of the User's page, I instead want the User's page to be a child of the layout. And that way, the layout won't be destroyed each time. We do that by visiting any of our pages, and I'm going to switch to this layout property that Inertia provides. I'm declaring what the layout is for this component. Now when I do that, I no longer have to manually wrap it like so. It will automatically be applied.

Now when I do that, I no longer have to manually wrap it like so. It will automatically be applied. So if we do that for all of these pages, it's a simple process of getting rid of layout, and then switching this like so. One more. Get rid of the wrapping layout, and instead register it like so. All right, so believe it or not, that's really all you have to do. Give it a refresh. Notice in Vue DevTools that the layout is now a parent of the user's page. And if I go to Settings, once again, layout is the parent of Settings.

And what's nice is things like this are basically impossible with a traditional server-side app. But if we're using Vue and Inertia, and Inertia's persistent layouts, it really couldn't be simpler.