Globally registering Vue components
Playing
01. Globally registering Vue components

Episodes

0%
Your progress
  • Total: 5m
  • Played: 0m
  • Remaining: 5m
Join or sign in to track your progress

Transcript

00:00
So let's look at how we can save ourselves a huge amount of time by globally loading in all of our Vue components when we're prototyping so we don't have to import each one as we create it.
00:12
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
00:26
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
00:44
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
01:02
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
01:14
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
01:25
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.
01:39
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.
01:54
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
02:08
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.
02:17
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.
02:33
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
02:47
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
02:59
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
03:13
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
03:31
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
03:51
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
04:09
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
04:25
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
04:43
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
04:59
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
05:17
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
05:33
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.

Episode summary

In this episode, we dive into a real time-saving trick for Vue development: globally registering all your components! This is especially handy when you're prototyping or learning your way around Vue, as it means you don’t have to constantly import and register each new component you create.

We start by looking at the typical (kinda tedious) way of importing and registering components one by one in your App.vue. Then, we explore a workflow where we set up index files in your component folders to export everything, and have a main index to consolidate those exports. Once that’s set up, we head over to main.js and import everything at once, using a little bit of Object manipulation and Vue.component() to register every component globally by name.

While this approach isn’t necessarily what you want for a production-ready app, it’s brilliant for playing around, learning, or rapidly prototyping. By the end, you’ll be able to drop any component anywhere in your app without explicitly importing it at the top of your files—instant productivity boost!

Perfect for when you just want things to work and don't want to get caught up in boilerplate code.

Episode discussion

No comments, yet. Be the first!