Wsrtjtyk

What I want to achive is to combine vuejs's "Async Components" and its "Dynamic Components" (https://vuejs.org/v2/guide/components-dynamic-async.html) to get a flexible way of using dynamic components.

Let's say, I have the following component:

<template>

    <div>

       some stuff..

       <component :is="type"></component>

       some stuff...

    </div>

</template>



<script>

    export default {

        name: "mycomponent",

        props: {

            type: {}

        }

    }

</script>

I would use it like so:

<mycomponent type="myinput"></mycomponent>

To make it work, I would need to load the myinput component in the mycomponent and I will do it aync:

components: {

    MyInput: () => import("./myinput")

}

That works!

The problem now is, that I want to make it dynamic and use it like so:

<mycomponent type="myinput"></mycomponent>

<mycomponent type="myselect"></mycomponent>

<mycomponent type="mytextarea"></mycomponent>

...

To get this up and running, I would need to import all of this components in the mycomponent, which is obviously not an good idea. Global import is as well, not the way to go.

This was just an example, but the real use case for this is getting an array of type's from an api and dynamically render a form with it.

So I have came up with I idea what I could not try yet.

Lets say you have a component for different types of inputs for the sake of simplicity you name them all with an 'Input' prefix.

As long as everyone follows the naming rules you can register all of these component globally.

For example in a BaseInputs.js

const components = require.context(path, subfolder, regexForInputComponentFileNames)

https://webpack.js.org/guides/dependency-management/#require-context

components.keys().forEach(element => {

    const componentName = element.replace(/*Everything that is not the component name like .vue*/)



    Vue.component(componentName, () => import(path + componentName)

})

Then you just import 'path/to/BaseInputs' at the beginning of your application.

As I said I have not tried it yet it might wrong somewhere or missing something I will give it a try as soon as I can.