Dynamically calling a component

How to call a component dynamically?

<ClockIcon/> - the icon is visible <component is="ClockIcon" /> - the icon is not displayed

I was having the same issue.

as I have a use case as below:


<script lang="ts" setup>
const menuItems: any = [
  {
    title: 'Dashboard',
    to: '/',
    permission: 'dashboard',
    icon: resolveComponent('HomeIcon'),
  },
  {
    title: 'Users',
    to: '/users',
    permission: 'index-users',
    icon: resolveComponent('UsersIcon'),
  },
  {
    title: 'Projects',
    to: '/projects',
    permission: 'index-projects',
    icon: resolveComponent('LayersIcon'),
  },
]
</script>

<template>
    <ul>
        <li v-for="item in menuItems" :key="item.permission">
            <component :is="item.icon" class="" />
        </li>
    </ul>
</template>

4sllan / nuxt-feather-icons

Dynamically calling a component #4