Dynamically loading components in Vue

Question

I have a component that is dynamically loading based on the value of the variable "scene". The problem is I have to import and load all the possible scenes under the components, and I have a lot of different possible components. Is it possible for Vue to just dynamically import the passed in scene, or do I need to import everything at the start?

For other reasons, I would prefer not to use a router for this case.

<component
  :is="scene"
  v-bind="options"
>
</component>

=========

import TitleSceneComponent
  from './scenes/common/TitleSceneComponent.vue';

import NarrationSceneComponent
  from './scenes/common/NarrationSceneComponent.vue';

import ChoiceSceneComponent
  from './scenes/common/ChoiceSceneComponent.vue';

  components: {
    TitleScene: TitleSceneComponent,
    NarrationScene: NarrationSceneComponent,
    ChoiceScene: ChoiceSceneComponent,
  },

Teej · Accepted Answer · 2019-09-20 09:50:17Z

1

I am thinking that you can use a v-if that loads different components depending on the data passed.

<TitleSceneComponent v-if="booleanValueOrCondition" />
<ChoiceSceneComponent v-if="anotherBooleanValueOrCondition" />

This way components can be loaded depending on your conditions.

answered Sep 20, 2019 at 9:50

Teej

12.9k9 gold badges76 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Joao Alves Marrucho · Accepted Answer · 2019-09-20 09:22:45Z

0

I would use vue router to something like this: https://router.vuejs.org/guide/#html

answered Sep 20, 2019 at 9:22

Joao Alves Marrucho

87912 silver badges32 bronze badges

1 Comment

Dan Tang Over a year ago

I would prefer not to use a router for this case as I want this component to handle the different states, and simply change the component as required.

Odd · Accepted Answer · 2019-09-27 14:10:22Z

0

You can do this:

<component
  :is="sceneComp"
  v-bind="options"
>
</component>

=============================

computed: {
  sceneComp() {
    return () => import(`./scenes/common/${this.scene}Component.vue`);
}

answered Sep 27, 2019 at 14:10

Odd

11 bronze badge

Collectives™ on Stack Overflow

Dynamically loading components in Vue

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related