Vue js import components dynamically

Question

I have the following parent component which has to render a list of dynamic children components:

<template>
  <div>
    <div v-for="(componentName, index) in supportedComponents" :key="index">
      <component v-bind:is="componentName"></component>
    </div>
   </div>
 </template>

<script>
const Component1 = () => import("/components/Component1.vue");
const Component2 = () => import("/components/Component2.vue");
export default {
  name: "parentComponent",
  components: {
    Component1,
    Component2
  },
  props: {
    supportedComponents: {
      type: Array,
      required: true
    }
  }
};
</script>

The supportedComponents property is a list of component names which I want to render in the parent conponent.

In order to use the children components in the parent I have to import them and register them.

But the only way to do this is to hard code the import paths of the components:

const Component1 = () => import("/components/Component1.vue");
const Component2 = () => import("/components/Component2.vue");

And then register them like this:

components: {
  Component1,
  Component2
}

I want to keep my parentComponent as generic as possible. This means I have to find a way to avoid hard coded components paths on import statements and registering. I want to inject into the parentComponent what children components it should import and render.

Is this possible in Vue? If yes, then how?

Answer 1

You can load the components inside the created lifecycle and register them according to your array property:

<template>
    <div>
        <div v-for="(componentName, index) in supportedComponents" :key="index">
            <component :is="componentName"></component>
        </div>
    </div>
</template>

<script>
    export default {
        name: "parentComponent",
        components: {},
        props: {
            supportedComponents: {
                type: Array,
                required: true
            }
        },
        created ()  {
            for(let c=0; c<this.supportedComponents.length; c++) {
                let componentName = this.supportedComponents[c];
                this.$options.components[componentName] = () => import('./' + componentName + '.vue');
            }
        }
    };
</script>

Works pretty well

Answer 2

Here's a working code, just make sure you have some string inside your dynamic import otherwise you'll get "module not found"

       <component :is="current" />
    export default {  data () {
    return {
      componentToDisplay: null
    }
  },
  computed: {
    current () {
      if (this.componentToDisplay) {
        return () => import('@/components/notices/' + this.componentToDisplay)
      }
      return () => import('@/components/notices/LoadingNotice.vue')
    }
  },
  mounted () {
    this.componentToDisplay = 'Notice' + this.$route.query.id + '.vue'
  }
}

Answer 3

Resolving dynamic webpack import() at runtime

You can dynamically set the path of your import() function to load different components depending on component state.

<template>
  <component :is="myComponent" />
</template>

<script>
export default {
  props: {
    component: String,
  },

  data() {
    return {
      myComponent: '',
    };
  },

  computed: {
    loader() {
      return () => import(`../components/${this.component}`);
    },
  },

  created() {
    this.loader().then(res => {
      // components can be defined as a function that returns a promise;
      this.myComponent = () => this.loader();
    },
  },
}
</script>

Note: JavaScript is compiled by your browser right before it runs. This has nothing to do with how webpack imports are resolved.

Answer 4

I think we need some plugin that can have code and every time it should load automatically. This solution is working for me.

import { App, defineAsyncComponent } from 'vue'
const componentList = ['Button', 'Card']
export const registerComponents = async (app: App): void => {
  // import.meta.globEager('../components/Base/*.vue')
  componentList.forEach(async (component) => {
    const asyncComponent = defineAsyncComponent(
      () => import(`../components/Base/${component}.vue`)
    )
    app.component(component, asyncComponent)
  })
}

you can also try glob that also work pretty well but I have checked it for this solution but check this out worth reading

Dynamic import

[Update]

I tried same with import.meta.globEage and it works only issue its little bit lazy loaded you may feel it loading slow but isn't noticeable much.

import { App, defineAsyncComponent } from 'vue'
export const registerComponents = async (app: App): void => {
Object.keys(import.meta.globEager('../components/Base/*.vue')).forEach(
    async (component) => {
    const asyncComponent = defineAsyncComponent(
        () => import(/* @vite-ignore */ component)
    )
    app.component(
        (component && component.split('/').pop()?.split('.')[0]) || '',asyncComponent
    )
    })
}