Как глобально зарегистрировать модульные компоненты через defineAsync?

Question

[Евгений]

Может кто то сталкивался или поддолкнет на мысль.
Vue3, сборка на VITE.

Необходимо глобально зарегистрировать компоненты, которые прописаны в сторонем файле (модуле) через defineAsyncComponent.
Не важно в каком формате они будут прописаны, либо просто пути в json, либо уже как подклюенные компоненты

Если вкратце для чего такая задача. Есть основное ядро в приложении, которое обновляется и перезаписывается. Задача что бы все пользовательские компоненты были где то перечислены отдельно в файлики и регистрировались при сборке.

Сначала пробовал вариант просто прописать все эти сторонние компоненты в отдельном файле:

// CustomComponents/index.js
import Component1 from "@/CustomComponents/Component1.vue";
import Component2 from "@/CustomComponents/Component2.vue";
export default {
    Component1, Component2
};

Но не понятно как их зарегистрировать:

import { createApp, h, defineAsyncComponent } from 'vue'
import CustomComponents from "@/CustomComponents/index.js";

const app = createApp({});

Возможно есть какой то другой подход, что бы отделить какие то компоненты ядра, от пользовательских компонентов - подскажите.

Answer 1

[Aetae]

app.component('MyComponent', MyComponent) 0_o

Comments

[Евгений]

Имеется ввиду как мне перебрать все компоненты из подключенного файла?
Просто перебор не работает. Да и основная задача всё же подключить их через defineAsyncComponent.

_.forEach(CustomComponents, function(value) {
app.component('MyComponent', value)
});

[Aetae]

Евгений, да надо перебирать. Если под "через defineAsyncComponent" ты имеешь ввиду что они не должны импортироваться сразу, а при обращении, то есть варианты, однако для начала: эти компоненты уже есть на этапе компиляции, или ты хочешь подуключать какие-то новые компоненты в старое, уже работающее приложение?

В первом случае тебе поможет glob-import, как-то так:

const components = import.meta.glob('@/CustomComponents/*.vue');

_.forEach(components, function(component, path) {
  const [ name ] = path.match(/[^\/]+(?=\.vue$)/i);
  app.component(name, defineAsyncComponent(component))
});

Во втором - всё гораздо интереснее.:)

[Евгений]

Да спасибо. У меня первый вариант и он вполне подойдёт.
Благодарю.