So now that we have persistent layouts working, if you want, we can even remove the need to import the layout into every page component. Let's play around with that. If I were to delete this entirely and switch back to the browser, give it a refresh, of course we lose our layout. Okay, now I'm going to go into my app.js file, and when we resolve the current page component, we're going to tweak this just a little bit. Now what we have here is a dynamic import, so that's going to return a promise, which means I can't just do something like this, because again, this is currently pending. So dynamic imports can be incredibly useful, especially for larger projects, and we're

means I can't just do something like this, because again, this is currently pending. So dynamic imports can be incredibly useful, especially for larger projects, and we're going to talk about that in the next episode. But for now, why don't we switch this over to a common.js require. Now when we pull this in, we'll actually need to grab the default component off of that. Okay, now of course we ultimately want to return that page component, but yeah, we do want to set the layout. So before, we were manually setting it here on each page, but now we're going to do it automatically for every page. Page.layout equals, and we'll need to pull in the layout component.

automatically for every page. Page.layout equals, and we'll need to pull in the layout component. Import layout. And we can tweak this a little bit, but this should be enough to get it working. So let's switch back to Firefox, I give it a refresh, and it's back. All right, so we have a little more work to do here, but real quick, I'm going to visit all of my page components and remove the import entirely. Down here, get rid of layout, like so. Okay, that recompiles, so if I switch back and refresh, now everything should work like it did before, but yeah, it's just a little less code to write.

Okay, that recompiles, so if I switch back and refresh, now everything should work like it did before, but yeah, it's just a little less code to write. Okay, the last thing I want to do here, if I switch back, there could be situations where certain pages have their own layout components, and the problem is right now, we would be overwriting it. So what you could do is say something like, well, if we don't have a pageLayout already, then let's assign it. Or another way to write this would be the, I can't remember what it's called, it's like the logical or operator or something like that, but it would effectively be set the pageLayout equal to what it currently is or the layout import.

the logical or operator or something like that, but it would effectively be set the page layout equal to what it currently is or the layout import. So this and this are functionally identical, and this is what we get. All right, one more time, give it a test, and it all works just like it did before. So yeah, that's a nice little convenience.