nixin-web/components/DynamicComponent.vue

<template>
  <component :is="type" class="dynamic-component" :class="type.split('-')[1]" :data-name="type.split('-')[2]"></component>
</template>

<script>
  let mod = []
  // we autoload all components in form and nix-code folders
  let comp = import.meta.glob('./{form,nix-code}/*.vue', { eager: true })
  Object.entries(comp).forEach(([path, definition]) => {
    let c = path.split('/');
    const componentName = c[1]+'-'+c[2].replace(/\.\w+$/, '')
    mod[componentName] = definition.default
  })

  // we autoload all custom components in form and nix-code custom folders
  comp = import.meta.glob('../custom/components/{form,nix-code}/*.vue', { eager: true })
  Object.entries(comp).forEach(([path, definition]) => {
    let c = path.split('/');
    const componentName = c[3]+'-'+c[4].replace(/\.\w+$/, '')
    mod[componentName] = definition.default
  })
   
  export default {

    components: {
      ...mod
    },

    props: {
      type: { type: String, required: true },
    },
  }
</script>