DEV Community: Jireh June Nimes

How to register global components in Vue 3 dynamically in 2023?

Jireh June Nimes — Sun, 23 Jul 2023 12:16:59 +0000

Header background image above is from NYStudio107.

I created a same article last 2021, How to register global components in Vue 3 dynamically?, then when I recently tried to use it with the latest version of Vue 3, it's not working properly anymore and with type issues.

Vue 3's documentation still not includes a way to dynamically register global or common components throughout your application by scanning a directory. The documentation only mentions to register each global or common component during app creation like this:



app
  .component('ComponentA', ComponentA)
  .component('ComponentB', ComponentB)
  .component('ComponentC', ComponentC)

For this article, I'll be showing a modified version that works with the latest version of Vue 3 + Vite + Vue Router + Typescript. I also tried this with implementation of SSR and the global components still work. I'll also explain what are the changes and why it is needed. Let's proceed!

Here is the sample directory structure:

We will register all components inside the common directory as global or common components with a .vue file extension.

src/components/common/components.ts



import type { App } from 'vue';

const importComponents = import.meta.glob('./**/*.vue');

export const registerComponents = async (app: App<Element>): Promise<void> => {
  for (const fileName of Object.keys(importComponents)) {
    const componentConfig = await importComponents[fileName]();
    const componentName = fileName
      .split('/')
      .pop()
      ?.replace(/\.\w+$/, '') as string;

    app.component(componentName, (componentConfig as any)?.default);
  }
};

For this instance, I prefer not to have a prefix of Base and I prefer to call them global or common components.

Let's start on getting the global or common component Vue files.



const importComponents = import.meta.glob('./**/*.vue');

If you remember from the previous article, we used require.context to get the global or common components that matches our desired filename pattern with a prefix of Base. require.context doesn't work with Vite properly and if you search for solutions, the recommended way is to use import.meta.glob.

My issue with import.meta.glob is that the component configurations are asynchronous unlike the previous implementation. The problem with that is during initial render of the application or when you refresh in the browser, the global or common components will not be detected especially with Vue Router.



export const registerComponents = async (app: App<Element>): Promise<void> => {
  // Some code here...
}

That's why you can see that the registerComponents function is asynchronous with a return type of Promise<void>. I'll show later that we will call the said function with await before registering Vue Router with our Vue application.

The app argument is the Vue application instance that we will be using to register our global or common components dynamically.



for (const fileName of Object.keys(importComponents)) {
  // Some code here...
}

Looping through the key values of the importComponents is somehow similar to the previous implementation its just that we prefer to use for loop instead to handle await before proceeding on next executions.



const componentConfig = await importComponents[fileName]();

As I mentioned awhile ago, the component configuration from using import.meta.glob is asynchronous or in Promise that's why we will need the use of await before executing the remaining commands and registering the following components. When one component fails to register, then the remaining components will not be registered and will throw an error.

The rest of the execution is similar from the previous implementation. Let's proceed on executing the registerComponents function in my main file where creating the instance of our Vue application takes place.

Originally, the name of the file is main.ts but in my case because I was doing it with SSR implementation, the name is app.ts which I call it on both entry-client.ts and entry-server.ts. I'll not discuss full SSR implementation here in detail but as I mentioned, the registration of global or common components works also with SSR.

src/app.ts or src/main.ts



import { createApp as createNonSSRApp, createSSRApp } from 'vue';

import App from './App.vue';
import { registerComponents } from './components/common/components';
import { router } from './router';

const createApp = async () => {
  const isSSR = typeof window === 'undefined';
  const app = (isSSR === true ? createSSRApp : createNonSSRApp)(App);

  await registerComponents(app);

  app.use(router(isSSR));

  return app;
};

export default createApp;

As you can see above that the createApp function is already asynchronous because of our registerComponents. I executed it first before register our Vue Router instance.

So that's it! I'll be updating this article further when needed and feel free to comment down below for further assistance or corrections. I hope this article will help you. Cheers!

PS: I'm openly looking for new opportunities as a full-stack developer. Please message me if interested. Thanks!

How to register global components in Vue 3 dynamically?

Jireh June Nimes — Sat, 10 Jul 2021 17:52:39 +0000

Header image above is a screenshot from the official website of Vue 3.

Vue 3 is now stable since June 8, 2021 with version 3.1.0 named Pluto. It is Typescript compatible and introduces Composition API where you can initialize most parts of the component inside the setup function. If you want more info about Vue 3, you can check the links below:

Vue 3 Official Website: https://v3.vuejs.org/
Vue 3 Github: https://github.com/vuejs/vue-next
- Stable release note: https://github.com/vuejs/vue-next/releases/tag/v3.1.0
Composition API: https://v3.vuejs.org/guide/composition-api-introduction.html#why-composition-api

Let's immediately proceed with the topic of this article. Vue 3 already has a documentation about registering components globally. Global components are Vue components that can be declared immediately inside the template of another component without import and declaration in components property. If you're not familiar with Vue 3, this is how we import other components inside a component:

<template>
    <div>
        <SomeComponent/>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import SomeComponent from '@/components/SomeComponent.vue';

export default defineComponent({
    components: { SomeComponent },
});
</script>

Assuming the file above is inside the views directory and we're importing a reusable component from the components directory. As you can see that it's not different on how we import components in Vue 2 except the difference in creating a component and the usage of Typescript (by adding lang="ts" inside the script tag).

If we make the component globally accessible to other components, this will be very helpful when our project becomes big making it more reusable. It will also remove the import of multiple components inside a component unless the component is a local sub-component. See example below:

<template>
    <div>
        <SomeComponent/>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
});
</script>

As you can see we just declared the SomeComponent component like a HTML element directly inside of another component without the import syntax and the components parameter inside the defineComponent function.

So how do we make a global component in Vue 3? According to the official documentation, here's how we register a component globally in main.ts file if you're developing using Typescript else in main.js file:

import { createApp } from 'vue';
import ComponentC from './components/ComponentC.vue';

// Usually it is App.vue inside the createApp function.
// App.vue is your main or root Vue component.
const app = createApp({}); 

// Component named with kebab-case.
app.component('component-a', {
  /* ... */
});

// Component named with PascalCase.
app.component('ComponentB', {
  /* ... */
});

app.component('ComponentC', ComponentC);

// The second argument of the component function is the object that creates a component or it can be an imported component instance.

// It willl mount the Vue app inside the HTML element with ID of 
// #app in index.html which is located in public directory.
app.mount('#app');

Reference: Vue 3 Global Registration

If we follow the procedure above, it will bloat our main.js or main.ts file especially if our application becomes bigger then our reusable components will increase. So how do we prevent that from happening?

I actually got the idea from Vue 2 documentation on registering global components dynamically which I always use when developing a frontend application using Vue 2. In Vue 3, they don't have this section in their documentation.

Reference: Automatic Global Registration of Base Components

Here's my implementation:

./components/base/index.ts

import { App } from 'vue';

const requireComponent = require.context(
  // The relative path of the components folder
  './',
  // Whether or not to look in subfolders
  false,
  // The regular expression used to match base component filenames
  /[A-Z]\w+Base\.vue$/,
);

const register = (app: App<Element>): void => {
  requireComponent.keys().forEach((fileName) => {
    // Get component config
    const componentConfig = requireComponent(fileName);
    // Get component name
    const componentName = fileName.split('/').pop()?.replace(/\.\w+$/, '') as string;

    app.component(componentName, componentConfig.default || componentConfig);
  });
};

export default {
  register,
};

If you checked the link I gave above for Vue 2 implementation, it is almost the same as my implementation above for Vue 3. Here are the differences in my implementation:

I have an argument of app with type of App<Element>. App type is from vue package and the Element type is more of an interface. See more details here.
My relative path is './' because I placed this code in ./components/base/index.ts.
My regex will get all the files that ends in Base.vue for them to be considered as a global component. I prefer to place all global components inside the base directory but you can name it anything you prefer.
- e.g. GlobalComponentBase.vue
I didn't used the lodash package if you prefer minimum external packages.

Here's how I implemented it in the main.ts file:

main.ts

import { createApp } from 'vue';

import BaseComponents from './components/base';

const app = createApp(App);

BaseComponents.register(app);

app.mount('#app');

That's it! Your main file will not bloat when you have hundreds of global components to register. I hope this article will help you a lot. 😉

I also created a Github Gist of the code implementation above:
https://gist.github.com/jirehnimes/2fcb31a2cbe7bb0c722a96f49e4cbf8f

Cheers!