How to globally register components, in a loop?

Question

Vue.js

According to the article , the solution is not suitable, because. all components are scattered throughout the structure in different folders and modules. For this, a separate file has been created in each module, which lists all the necessary components for global registration.

The idea was this:
When building, the application bypasses the folders of the module, which contains the file with the global components of the module, in the form of an object (key -> name, value - location). Then I include a file with this object and iterate over its properties, registering the component.

// Пример структуры файла одного из модулей 
export default {
    ModulePageItemsTypes:   "./components/pages/items/ModulePageItemsTypes",
    .....
}

But when I try to loop through this file and register the components.

import globalComponents from './pathToModule/globals'
for (var key in globalComponents) {
    // Вот так компонент регистрируется (если указывать путь строкой)
    Vue.component(key, require('./components/pages/items/ModulePageItemsTypes').default);

    // Если путь указан через переменную цикла, то при сборке выдает ошибку.
    Vue.component(key, require(globalComponents[key]).default);
}

Or maybe there is an easier way.

Answer 1

Try require(`${globalComponents[key]}`).default)