Load components dynamically based on list of identifiers

Question

Load components dynamically based on list of identifiers

With over 100 components at my disposal, not all of them will be needed on a single page.
For instance, a user might select a list of component IDs (components_ids - [7, 50, 22]).
When the page is visited, I will only load the components with IDs that match 7, 50, or 22 from the components_ids list.

I have realized that all components can be loaded on the page and used dynamically using :is, but loading all 100+ components consumes unnecessary memory resources.

Is there a way for me to load only the components that are selected by the user?

Any suggestions would be greatly appreciated!

javascript vue.js

Answer 1

Answer №1

Check out this link for information on dynamic async components in Vue.js: https://v2.vuejs.org/v2/guide/components-dynamic-async.html#Async-Components

<template>
  <div>
    <component v-for="component in myComponents" :is="component"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      component_names: ['select', 'input', 'modal']
    }
  },
  computed: {
    myComponents() {
      return this.component_names.map(name => () => import(`@/components/${name}.vue`));
    }
  }
}
</html>

I used descriptive names instead of numeric IDs to demonstrate mapping from IDs to component paths.

The use of double lambda functions might seem daunting at first glance, but it's a way to map strings to functions that load components dynamically.

<component :is="() => import('@/components/hello.vue')"

is an example of how to dynamically load components.

However, using

:is="import('@/components/hello.vue')"

directly won't achieve the same result.

Answer 2

Check out this link for information on dynamic async components in Vue.js: https://v2.vuejs.org/v2/guide/components-dynamic-async.html#Async-Components

<template>
  <div>
    <component v-for="component in myComponents" :is="component"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      component_names: ['select', 'input', 'modal']
    }
  },
  computed: {
    myComponents() {
      return this.component_names.map(name => () => import(`@/components/${name}.vue`));
    }
  }
}
</html>

I used descriptive names instead of numeric IDs to demonstrate mapping from IDs to component paths.

The use of double lambda functions might seem daunting at first glance, but it's a way to map strings to functions that load components dynamically.

<component :is="() => import('@/components/hello.vue')"

is an example of how to dynamically load components.

However, using

:is="import('@/components/hello.vue')"

directly won't achieve the same result.

Load components dynamically based on list of identifiers

Answer №1

Similar questions

Should I use a single directive with ng-if statements in AngularJS, or opt for two separate directives?

The getStaticProps function in Next.js does not pass any data back to the pages

Personalizing Google Map pin

Can Google Maps be initialized asynchronously without the need for a global callback function?

Aggregate values through an onclick event using a get request and iterate through each using

Is there a way to create a diagonal movement for an image by clicking on another HTML element?

What causes the _.sum() function in lodash to not work with objects in Vuejs?

Tips for maintaining the navigation tab's consistent appearance

Develop a professional Angular application for deployment

Exploring Protractor testing with Bootstrap modals

Choose a row in an Angular ngGrid upon loading the page

Error: A surprise 'dot' token was found while defining the function

Issues encountered with AngularJS directive binding inner content not functioning as expected

Creating a custom AngularJS HTTP interceptor that targets specific URLs

Building on the functionality of AngularJS, a directive scope can be established to access and modify

Linking a watcher property to control the opacity value of inline styles

What is the best way to halt an animatePNG sequence?

Tips for circumventing CORS in an ajax request using various browser extensions or add-ons

Efficiency boost: Implementing ajax to load content

ReactJS does not display an image from the local file system