So I've got a Vue CLI project just built up here. We have nothing on the page as you can see just over here. And we're going to start to create some components and load these in in the traditional way. So over in our components directory, let's say we have an elements folder inside of here

and we go ahead and we create maybe some kind of global app button that we can use. Let's just go ahead and stick any content in here now just so we can see this working. So over in app what we would normally have to do is go ahead and import this. So we'd import app button from and we can go ahead and use that shortcut to access the

components directory, go into elements and then of course pull in app button. Then of course what we need to do is make this component aware of this child component and of course we have this now available to us and we can go ahead and output it. Now this is all well and good but I find this a little bit of annoying particularly when

I'm either learning something new or I'm prototyping when we have to go ahead and import these all at the top. Things start to get a little bit messy as well. I wouldn't necessarily recommend the technique we're about to look at for production site

but there's nothing really wrong with doing that. It's really personal preference. So what we're going to do is get rid of that that we've just created inside of there. And of course get rid of app button and we're not going to register this inside of here

as a component. Now before we start global components do have their place. When you go ahead and install a package for view usually the components will be registered globally but we're going to register every single component that we create as global.

Now the first thing that we want to do is inside of say a subdirectory in here we want to export all of the components that we have inside of this directory. So really this is the only thing that we need to do. So what we do inside of here is we say export default as we give this a name.

So in this case it'll be app button and of course we choose the location. So in this case is app button. Any other components that we add in here we just need to add a new line. You can do some fancy stuff to look up all of these files and then export them but I

find it quite clear to have them in here. So for example you might have some kind of button section and other components in there as well. So let's go ahead and create another one.

Let's just create a folder inside of here. What I usually have is a kind of globals folder inside of components as well as an elements folder and then also collections one as well. So let's go ahead and create out say a global menu.

So let's say the menu.view and let's go ahead and just say the menu. So inside of this we also need that index file. So of course you only need to do this once. So let's go ahead and create that index.js file inside of here and do exactly the same

thing. So export the menu and of course duplicate this for any other components we have inside of this globals folder. So now what we do is inside of the main components directory we go ahead and create this out

and all we need to do in here is go ahead and export everything from each of them individual files. So in this case we have an elements directory and we have a globals directory. Now this might seem like a little bit more work to actually do this but of course once

you're set up with all of your exports inside of here and you've created each individual index.js file inside of here exporting these, then of course this is going to massively speed up your workflow particularly for prototyping. Now of course at the moment we can't just use these, all we're doing is we're exporting

every single one of our components from this main file but this is where we can come over to main.js and import all of the components that we've exported inside of here and then register them iteratively as global components. So the first thing that we want to do is import everything as components from the app components

directory or just using that app alias and let's just go ahead and log out on components just to see what we've got so we can start to fiddle around with this. So of course over here we've got an object and we've got app button and the menu so we've got each of them components but notice this is an object not an array so we can't really

just iterate over this, normally what we would do is something like components for each but that is of course not going to work properly on an object. So what we do is we just use object keys so let's go ahead and pass them components in here, let's just grab this and log this out just to see what this gives us for now and

you can see that we've got two items in here, app button and the menu. Now what we want to do is we want to access the components here and grab out the app button property and that will contain the actual component itself and we also want to register this as the name that we've given it here, that's just common practice that we register

this as the actual file name. So now what we can do is getting rid of this console log, we can now do a for each on this because we have an array and inside of here we can take in the key that we get and again if we just log this out just so we can see what we're doing here, of course we see app

button and the menu, what we can now do is we already have view pulled in just here, we can say view component which will allow us to register a global component, pass in the key which is going to be the name of the component that we want to register and then we can go into that and dive into components accessing that actual component out at that

specific key. So what that's done then is not a lot at the moment because we're not using these on the page but now we have a global component registered for each of these, we can now use these components anywhere, whether they're in pages, in child components, it doesn't matter, they're now

available within your entire application. So what I can now do is say for example the menu and we output app button, sure enough if we hop over to the browser, we see both of them components without having to import them inside of here and register them over on the components property.