jirehnimes/vue3-global-registration-of-components.md

## vue3-global-registration-of-components.md

      
    Raw
  

              vue3-global-registration-of-components.md
            
          
    How to register your global components dynamically in Vue 3?

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,
};
main.ts
import { createApp } from 'vue';

import BaseComponents from './components/base';

const app = createApp(App);

BaseComponents.register(app);

app.mount('#app');