Tess
Tess
PostsComments
NNuxt
Created by Tess on 5/6/2025 in #❓・help
Issue with Dynamic Components Loading nuxt 3
Hello everyone, I have a composable useComponentRegistry, which is supposed to load a component either from the core or from a custom registry if it exists. The function looks like this: 
const customComponents = import.meta.glob('@components/**/*.vue')
const coreComponents = import.meta.glob('@core/**/*.vue')

export function useComponentRegistry(componentPath: string) {
  const customPath = `/components/custom/${componentPath}.vue`;
  const corePath = `/components/core/${componentPath}.vue`;

  const loader =
    customComponents[customPath] || coreComponents[corePath]

  if (!loader) {
    throw new Error(`Component not found in custom or core: ${componentPath}`)
  }

  return defineAsyncComponent(() =>
    loader().then((mod) => mod.default)
  )
}
const customComponents = import.meta.glob('@components/**/*.vue')
const coreComponents = import.meta.glob('@core/**/*.vue')

export function useComponentRegistry(componentPath: string) {
  const customPath = `/components/custom/${componentPath}.vue`;
  const corePath = `/components/core/${componentPath}.vue`;

  const loader =
    customComponents[customPath] || coreComponents[corePath]

  if (!loader) {
    throw new Error(`Component not found in custom or core: ${componentPath}`)
  }

  return defineAsyncComponent(() =>
    loader().then((mod) => mod.default)
  )
}
When I try to render the component dynamically like this: 
<component :is="useComponentRegistry('block/sliders/SliderBanners')" :banners="banners"></component>
<component :is="useComponentRegistry('block/sliders/SliderBanners')" :banners="banners"></component>
I get errors during the build process : Cannot read properties of null (reading 'ce'), Cannot destructure property 'type' of 'vnode' as it is null, Warn: resolveComponent can only be used in render() or setup(), Unhandled error during execution of render function. After the build, there are no more errors, and the components work as expected. When I pass the banners prop directly to the SliderBanners component like this, it works perfectly fine: <SliderBanners :banners="banners"></SliderBanners> I’m wondering if there’s something wrong with how I’m using useComponentRegistry for dynamic component loading or if there’s something specific I’m missing when passing props dynamically. Is there a best way to load my custom components if exist ? I'm currently blocked because the import cannot handle dynamic variables with subdirectories. Thank you!
7 replies