Introducing Layout Files 0:00Let's now move on and discuss Vues. So you see this welcome page here, and you know it's in the resources Vues directory. But notice we pull in the dog type, and the head, and all the scripts, and all the styles. Well that means if we pulled in some kind of script, I'd have to add this line to every single Vue, and it's just not practical. So in real life, you'll leverage what we call layout files. Here's how. I'm going to create a new file here, and I'll call it layout, anything you want though. Now I'm going to switch back to my welcome file, and we'll start by grabbing all of this and moving it to the layout file. Extracting Shared Markup 0:31Now I'm going to switch back to my welcome file, and we'll start by grabbing all of this and moving it to the layout file. Now when we're done, we want only the data, or only the HTML, that is unique to the welcome page to be present in this file. So let's go through it one step at a time. If we scroll up, the dog type is not unique to the welcome page. The HTML, the head, most of this is not unique. So if we scroll down, let's just keep it where it is, but then right around here, we're starting to see some stuff. So why don't we cut all of this out and move that to the welcome file.starting to see some stuff. So why don't we cut all of this out and move that to the welcome file. All right, so now if I switch back, you'll see your layout file mostly has the wrapping HTML. It has the general structure, but for the content, that will be stored in the welcome file here. Okay, but obviously it's still not going to work. If I come back to Firefox, this is what we get, and that's because we haven't yet referenced the layout file. We can do that like so. Extending and Yielding Sections 1:25the layout file. We can do that like so. At the very top, I'm going to say, this file extends our layout file. But next, think about it, where exactly should this HTML be inserted? We're extending the layout file, but should that div be down here? Should it be somewhere else? We have to specify it. I want it to be inserted right within the body tag. So here I'm going to yield a section called anything you want. Let's call it content.So here I'm going to yield a section called anything you want. Let's call it content. Now in our view, we can declare that section like so. Here's a section for the content, and again, notice these what we call directives. This is all Laravel's blade templating engine. It's very nice, and I will paste all of that in. Okay, so now think about what we have here. When I load the welcome page, it loads this view. This view declares that it's extending our main layout file. Notice it's saying, all right, for the main content section, this is what I want to insert.This view declares that it's extending our main layout file. Notice it's saying, all right, for the main content section, this is what I want to insert. Okay, now if we take a look at the layout file, we'll see, all right, that content section should be spit out right here. So if I come back to Firefox and give it a refresh, oh, I'm sorry, we put the layout file in the resources directory instead of the views directory. Let's fix that and give it another reload. And now we're using the same thing as before, but this is a more structured approach. It allows us to reuse that layout file. And it also means, like we discussed, if I ever do need to add an extra script, maybe Creating a Contact Page 2:46It allows us to reuse that layout file. And it also means, like we discussed, if I ever do need to add an extra script, maybe down here, I only have to create it in one location rather than repeating myself for every single view, which does not make sense. So now let's imagine, we'll go to our routes file, we're going to add another one here. We'll have maybe a contact page, and this will load a view called contact. Okay, if I go to Firefox, let's go to that contact page. The view does not exist, so we create it, contact.blade.php. And now I can say, all right, I'm not going to repeat all that HTML, I'm just going to extend the layout file and then build up my section, like so. Multiple Yields and Sections 3:22And now I can say, all right, I'm not going to repeat all that HTML, I'm just going to extend the layout file and then build up my section, like so. And whenever we want to render this, we need to yield that section. So I could yield, for example, you could yield a header. You could yield a footer. You can yield as many times as you want. And then if you want to spit information out there, all you have to do is create a section that corresponds to it. All right, so now our contact page should have all our wrapping HTML, and then within the main content, it'll say, hello world.All right, so now our contact page should have all our wrapping HTML, and then within the main content, it'll say, hello world. Come back to Firefox, refresh, and there we go. If you view the source, there's all that HTML that we had before, and again, the content was inserted right there. This is Layout Files 101.
