[Vuejs]-Dynamically import components

0👍

Well, you need to register component in components any way.

One wat to do it would be:

<template>
  <div>
    <div v-for="widget in widgets">
      <component v-bind:is="widget"></component>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      widgets: [
        'Name1',
        'Name2',
      ],
    }
  },
  components: {
    Name1: () => import(`./widgets/Name1.vue`),
    Name2: () => import(`./widgets/Name2.vue`),
  },
}
</script>

By registering components like that you can be sure that only used ones will get imported.

Leave a comment