How to make dynamic imports?

Question

JavaScript

I have a view form. The form must be used on different sites. They need different inputs.
It is clear that you can add all kinds of inputs to the form and, for example, use

< component :is='нужный инпут в зависимости от пропса'>

, or stupidly several forms in one ifami.
So far I have found a solution for myself: make a vue component for each site with two properties, call the base form in it via extends, and take the necessary components as a mixin.
B would like not to produce mixin files like ComponentsForSomeSite.js, but to make, for example, a function that would return the necessary imports.
I would like it to look something like this. Is it possible to do something like this or tell me how best to organize everything?

import PhoneInput from '@core/inputs/PhoneInput.vue';

export default function (type) {
    let CustomInput;

    if (type === 'material'){
        CustomInput = import('@core/inputs/MaterialInput.vue');
    }
    else {
        CustomInput = import('@core/inputs/BaseInput.vue');
    }
    return {
        components:{
            CustomInput,
            PhoneInput
        }
    }
};

Answer 1

It is clear that you can add all kinds of inputs to the form and, for example, use
This is how you do it. Register all possible components by making them asynchronous .

Answer 2

You can, for example, make those that can be hooked - global as an option.