Hey there, welcome back. Unless you're building a full-fledged API or maybe using something like Inertia, Vues are fairly important in pretty much every application. And with modules, we need ways to load them from different paths, since they're no longer going to reside under resources/vue, unless you want to. But ideally, you want to have them within the modules. On this lesson, we're going to see how to write through both Vues as well as components using Laravel's service provider features. Let's jump into the code. All right, I've started by adding a Vue under order, use checkout/index.blade.php, this file

Let's jump into the code. All right, I've started by adding a Vue under order, use checkout.index.php, this file right here. Let's do the following. Let's open php artisan tinker and try to load a Vue from, let's say, checkout.index. Maybe that's going to work. No, it doesn't. What about order.checkout.index? Doesn't work either. Maybe order::checkout.index will work?

Doesn't work either. Maybe order, checkout.index will work? Let's see. It doesn't, but we do get a different error. That's important because we're going to leverage that soon. So Laravel doesn't know how to load Vues from different paths, at least not natively. We have to instruct it to load Vues and components from, let's say, custom paths. Let's close Tinker and let's go to our OrderServiceProvider class. Within the boot method, we can call a method loadVuesFrom. And we have two arguments here.

Within the boot method, we can call a method loadViewsFrom. And we have two arguments here. We have the path and we have the namespace. First let's work with the path. So let's go to the current directory. Let's go back one directory, go back another directory, actually just one directory, and then say Vues. The second argument is the namespace, it's the prefix for this module or for those Vues. And we're going to say order. Let's open php artisan tinker once again.

And we're going to say order. Let's open php artisan tinker once again. Now if we try order.checkout.index, it doesn't work. But if we try order::checkout.index, it works. So this is what the namespace is. It's pretty common to see this with packages, and the idea is pretty much the same when you're working with modules. If you consider the modules to be packages, the namespace is the prefix when you want to load a Vue. So now Laravel knows how to load Vues.

to load a Vue. So now Laravel knows how to load Vues. Let's close tinker. Okay, now I'm going to create a file within this directory as well. It is going to be called components/orderLine.blade.php. This is an anonymous component. And let's just add some very simple markup that just leverages Blade components. Let's say product, and we're going to expect a product variable to be passed into this component. So if we go here and we're trying to add a component, let's say something like orderLine,

component. So if we go here and we're trying to add a component, let's say something like orderLine, and we want the product name to be DeskProduct. Let's try rendering this Vue now. So php artisan tinker, I'm going to load the same Vue. Let's call the render method to actually render. Unable to locate a class or Vue for a component. That's because Laravel does not know where to load that component from. Let's go into OrderServiceProvider and call Blade. We want to import the facade.

Let's go into OrderServiceProvider and call Blade. We want to import the facade. And then we want to call the anonymous component path method. We want to go into the current directory. Let's go back one directory, Vues, and then components. Actually we have to move this right here. Before I save this, though, let's retest this. I'm actually going to comment this. Let's retest this just to make sure it still doesn't work. Still doesn't work.

Let's retest this just to make sure it still doesn't work. Still doesn't work. Okay, let's go back here and comment this. And the second argument is, again, the prefix or the namespace. Let's call it order. If we go into the place where we're loading this component from, and we simply add the namespace to the prefix, you can see that autocomplete even works. So it understands where the components are being loaded from. Let's retry this. Let's go into tinker and try to render that view.

Let's retry this. Let's go into tinker and try to render that view. There we go. We're loading the anonymous component. Now what if you had a Fublo component which includes a class? As you can see, we have a very simple alert component. I actually created the alert.blade.php file outside of the components directory so it's not loaded as an anonymous component. And you can see I'm passing the path here. That's correct.

And you can see I'm passing the path here. That's correct. Let's try and load that. So let's go into our index file and let's try to add an alert. So based on our syntax so far, it would be order and then alert, and we can pass a message. So let's say something is working. If we try to render this, let's see what happens. Well, it couldn't locate a class or a view for the component order alert. We have two ways to register Fublo components. The first one is, let's go here and we can register each component individually.

We have two ways to register Fublo components. The first one is, let's go here and we can register each component individually. We can call the component method and for example, we can say orderAlert and then pass the full qualified namespace for that component. If I were to go here and simply change this from this to this, which is what we registered, let's rerun this and it's rendered. The other way is we can register the namespace. So for example, let me get rid of this and now we can instruct Blade to load everything from a given namespace. For example, we want to pass the fully qualified namespace here.

from a given namespace. For example, we want to pass the fully qualified namespace here. So we have to do modules, view components, oh, there we go, order view components. You can get rid of this and then also pass a prefix. We're going to say order as usual and within our module, we don't have to change anything. As you can see, autocomplete works as well. Let's try this. We're going to php artisan tinker, render this and it works. So you have two ways to load components, full blown components that is. You can either register each component individually or you can pass a namespace, pass a prefix.

So you have two ways to load components, full blown components that is. You can either register each component individually or you can pass a namespace, pass a prefix and then Blade will automatically register every class within that path. Very simple, isn't it? That's all there is registering views, components and anonymous components. Laravel does all the hard work. We just have to instruct it where to load things from. As usual, I hope you guys enjoyed this lesson and I see you on the next one. Bye bye.

Bye bye.