how to load a component dynamically in vue

Question

<template>
  <div>
    <v-container fluid id="main">
      <v-card class="white lighten-4 elevation-3">

        <li v-for="stop in stop_name_arr">
          {{stop}}
        </li>

        <direct_bus_travel_time_in_between_stops>
        </direct_bus_travel_time_in_between_stops>

        <direct_bus_travel_distance_in_between_stops>
        </direct_bus_travel_distance_in_between_stops>

      </v-card>
    </v-container>
  </div>
</template>

i have two components direct_bus_travel_time_in_between_stops & direct_bus_travel_distance_in_between_stops to be loaded after <li v-for="stop in stop_name_arr">{{stop}}</li> has been executed completely .

Is there any way to append the components dynamically inside a function to load it when I want it to load ?

Answer 1

I very much think that you could use meta component tag which asynchronously loads the given component in it passed to is attribute.

Here's the code:

<component is="direct_bus_travel_time_in_between_stops" > </component> <component is="direct_bus_travel_time_in_between_stops" > </component>

You could add functions/events in this tag on which condition it will load. I think this link would be helpful - https://vuejs.org/v2/guide/components.html#Dynamic-Components which describes about binding component to use dynamically

Hope my approach was useful for you!

UPDATE: This answer was provided in reference to vue version 2.x. I am unaware of vue 3.x and haven't read 3.x docs. You can always submit an edit draft for vue 3.x compatible solution. Thanks!