Vue 3 load component dynamically from string

Question

Trying to dynamic load components based on a string.

Should look something like this:

<component v-for="component in components" :is="eval(component)" />

But unfortunately this doesn't work.

The workaround I'm using for now is creating a function returning the component:

<script setup>
import BarChart from '@/components/BarChart.vue'

const components = ['BarChart']

const stringToComponent = component => {
  return eval(component)
}
</script>

<template>
  <component v-for="component in components" :is="stringToComponent(component)" />
</template>

Why is calling eval directly not working and is it possible to avoid creating a function?

Boussadjra Brahim · Accepted Answer · 2022-05-22 13:02:10Z

2

Add the component to the array without defining as string const components = [BarChart] :

<script setup>
import BarChart from '@/components/BarChart.vue'

const components = [BarChart]

</script>

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

edited May 22, 2022 at 13:02

answered May 21, 2022 at 19:39

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

4 Comments

Erik Alserda Over a year ago

:in was a typo. I'm using :is but it expects a component not a string.

Boussadjra Brahim Over a year ago

@ErikAlserda please check my edited answer

Erik Alserda Over a year ago

My example is pseudo code, the array of components are fetched from a API so it will be a array of strings.

Boussadjra Brahim Over a year ago

what about import {h} from 'vue' and use h instead of eval

Collectives™ on Stack Overflow

Vue 3 load component dynamically from string

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related