Retrieving registered components dynamically in Vue.js

Question

Retrieving registered components dynamically in Vue.js

In my setup, I have a selector

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

, along with a

<select v-model="currentComponent">...</select>

that allows me to choose which one is displayed.

Currently, I am managing a separate list of components structured like this:

var componentList = [
  { name: 'Component A', id: 'component-a' },
  { name: 'Component B', id: 'component-b' }
];

This approach feels repetitive as I have to update this list each time a new component is added. I would prefer a more elegant way to abstract the component list.

I attempted the following in my app:

var vm = Vue.extend({
  components: {
    'component-a': ComponentA,
    // and so on...
  }
  computed: {
    componentList: function() {
      // possibly map this.$options.components or another method?
    }
  }
});

However, I haven't made much progress. Any suggestions, best practices, or tips are greatly appreciated!

Thank you!

javascript vue.js

Answer 1

Answer №1

In my current project, I've organized all my components within a folder named 'components'. Inside this folder, there's an index.js file that exports all the components, just like this:

export componentA from './componentA.vue'
export componentB from './componentB.vue'

And then inside my Vue component, I import them in a similar way:

import * as allComponents from '../components'

var app = new Vue({
  components: allComponents,
  computed: {
    componentNames() {
       return Object.keys(allComponents)
    }
  }
})

Answer 2

In my current project, I've organized all my components within a folder named 'components'. Inside this folder, there's an index.js file that exports all the components, just like this:

export componentA from './componentA.vue'
export componentB from './componentB.vue'

And then inside my Vue component, I import them in a similar way:

import * as allComponents from '../components'

var app = new Vue({
  components: allComponents,
  computed: {
    componentNames() {
       return Object.keys(allComponents)
    }
  }
})

Retrieving registered components dynamically in Vue.js

Answer №1

Similar questions

JavaScript - Combine objects by summing values with matching keys

What does drizzle.config.ts serve?

I am interested in retrieving an array

Utilizing AJAX to submit a combination of text fields and files in an HTML form

I'm feeling completely lost trying to understand cors in conjunction with fetch, particularly when an options request is

Use the inline IF statement to adjust the icon class depending on the Flask variable

Make sure to include all enum type values within the function's body to ensure comprehensive coverage

Tips for adjusting the positioning of a div element in a responsive design

Create a search feature based on names utilizing Node Express in conjunction with SQL database

Using a modal within a map function: Tips and tricks

The error `Error occurred when rendering: Users' data cannot be mapped` indicates a problem with the rendering process

Struggling to successfully update a database using a combination of javascript and PHP

JavaScript example: Defining a variable using bitwise OR operator for encoding purposes

Communication between parent and child elements in jQuery

Transmit information using jQuery to an MVC controller

Looking for a straightforward way to incorporate a "Read more" and "Show Less" functionality into a Wordpress site using Javascript?

Collect information from forms and save it to a mobile phone number

Tips for creating CSS styles for a selected input field

Choose information based on the prior choice made

Using Javascript to populate textboxes with the value of checkboxes