Automatic Vue Component Registration with Vite

Vite to the rescue

Fortunately, Vite comes with an extremely handy function called import.meta.glob (more information here) which allows you to prepare entire directories for importing either synchronously or asynchronously. Simply feed it a glob and Vite will prepare an array of import functions you can call on at any time. Pair that with a Vue app plugin and you have yourself an automatically-registered component library without any need for dependencies (well, maybe a few lodash utilities).

Creating a Vue 3 app plugin

Plugins for Vue 3 are tremendously easy to create. You’ve probably used a fair few. They’re the things that you see in your entry file with app.use(pinia) which you import from a package. So let’s create a new file in a plugins directory in our app and call it component-library.js. In that file, paste this:

export default {
  install: (app, options) => {
	// code will go here shortly
  }
}

When you import this from your entry file and pass it to app.use(), the install function will execute with your app instance as the first argument (app) and any options passed to the the use function will come through as the options argument. With that app argument, we can register components globally via calling app.component().

Namespacing our components

Registering components with just their filename would be fine for a small app, but what about if we’ve got loads of nested directories with pretty generic filenames like List.vue or Button.vue? It’d quickly become a tangled nightmare of ExtremelyComplicatedAndVerboseFilenamesInAList.vue. Fortunately, we can do the following:

1export const resolveName = (component) => {
2	let name = component.match(/(?:^.*?(?:a?sync|web)\/)(.*?)(?:\.vue$)/i);
3	if (!name || !name[1]) return null;
4	name = name[1]
5		.replace(/(^[a-z]|\/[a-z])/g, (value) => {
6			return value.toUpperCase();
7		})
8		.replaceAll("/", "");
9
10	return name;
11};

We’ll call this function on each component in our glob. The regex might look pretty scary, but all it’s doing is taking a file path like ../../components/sync/path/to/your/component.vue and extracting out path/to/your/component for us to use. Next we:

1. Check if the glob has given us a valid component
2. Replace the first letter of the path with a capital letter
3. Replace any letters after a / with a capital letter
4. Remove all slashes

The end result will hopefully be PathToYourComponent, which we can use as the component’s name when registering it. So let’s go back to our Vue plugin and implement our new function.

Registering synchronous components

1export default {
2  install: (app, options) => {
3	const components = import.meta.glob("../../components/sync/**/*.vue", { eager: true });
4	for (const component in components) {
5		const name = resolveName(component);
6		if (!name) continue;
7
8		app.component(`Scw${name}`, components[component].default);
9	}
10});

Using our import.meta.glob function, we fetch every .vue file in our components/sync directory. Note that the glob path is relative to the directory of this plugin file.

Next we loop through the components and get a component name for them.

Finally, we’ll register them with our app. We chose to prepend Scw onto the start of all of our components so we know where they’re coming from. Now we can use it anywhere in our app with:

<template>
	<ScwPathToOurComponent />
</template>

So far, we’ve just replicated what unplugin-vue-components could have done. But now let’s try to register asynchronous components. These are the ones that will only load when they’re required from the template.

Registering asynchronous components

Thanks to Vue’s defineAsyncComponent function, this step is pretty easy. We only really need to change two things from our previous code.

1export default {
2  install: (app, options) => {
3	const components = import.meta.glob("../../components/async/**/*.vue", { eager: false });
4	for (const component in components) {
5		const name = resolveName(component);
6		if (!name) continue;
7
8		app.component(`Scw${name}`, defineAsyncComponent(components[component]));
9	}
10});

Now we’re globbing the async directory inside components and have changed eager to false. This means that Vite will create a separate .js file for each component and only load it when the function is called.

Secondly, instead of passing the function straight to app.component(), we’re going to pass it via defineAsyncComponent instead. Your component is now turned into a Promise that calls a script loader and returns your component only when needed.

Full code

1import { defineAsyncComponent } from "vue";
2
3export const resolveName = (component) => {
4	let name = component.match(/(?:^.*?(?:a?sync|web)\/)(.*?)(?:\.vue$)/i);
5	if (!name || !name[1]) return null;
6	name = name[1]
7		.replace(/(^[a-z]|\/[a-z])/g, (value) => {
8			return value.toUpperCase();
9		})
10		.replaceAll("/", "");
11
12	return name;
13};
14
15export default {
16  install: (app, options) => {
17	// Sync
18	const syncComponents = import.meta.glob("../../components/sync/**/*.vue", { eager: true });
19	for (const component in syncComponents) {
20		const name = resolveName(component);
21		if (!name) continue;
22
23		app.component(`Scw${name}`, components[component].default);
24	}
25
26	// Async
27	const asyncComponents = import.meta.glob("../../components/async/**/*.vue", { eager: false });
28	for (const component in asyncComponents) {
29		const name = resolveName(component);
30		if (!name) continue;
31
32		app.component(`Scw${name}`, defineAsyncComponent(components[component]));
33	}
34});

Where next?

There are quite a few other opportunities we could pursue here. One we later implemented was to have our asynchronous components also register a loadingComponent which can be shown while the main async component is being downloaded and initialised.

Another option is to also register a directory of web components as well using Vue’s defineCustomElement function.

What you won’t need to do is write endless component imports inside every single page and component of your app.