Advanced Vue.js Dynamic Functional Component using `:is` syntax and render function

Question

Background: I've built a standard single file component that takes a name prop and looks in different places my app's directory structure and provides the first matched component with that name. It was created to allow for "child theming" in my Vue.js CMS, called Resto. It's a similar principle to how WordPress looks for template files, first by checking the Child theme location, then reverting to the parent them if not found, etc.

Usage : The component can be used like this:

<!-- Find the PageHeader component
in the current child theme, parent theme,
or base components folder --->
<theme-component name="PageHeader">
    <h1>Maybe I'm a slot for the page title!</h1>
</theme-component> 

My goal : I want to convert to a functional component so it doesn't affect my app's render performance or show up in the Vue devtools. It looks like this:

<template>
  <component
    :is="dynamicComponent"
    v-if="dynamicComponent"
    v-bind="{ ...$attrs, ...$props }"
    v-on="$listeners"
    @hook:mounted="$emit('mounted')"
  >
    <slot />
  </component>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'ThemeComponent',
  props: {
    name: {
      type: String,
      required: true,
      default: '',
    },
  },
  data() {
    return {
      dynamicComponent: null,
      resolvedPath: '',
    }
  },
  computed: {
    ...mapGetters('site', ['getThemeName']),
    customThemeLoader() {
      if (!this.name.length) {
        return null
      }
      // console.log(`Trying custom theme component for ${this.customThemePath}`)
      return () => import(`@themes/${this.customThemePath}`)
    },
    defaultThemeLoader() {
      if (!this.name.length) {
        return null
      }
      // console.log(`Trying default component for ${this.name}`)
      return () => import(`@restoBaseTheme/${this.componentPath}`)
    },

    baseComponentLoader() {
      if (!this.name.length) {
        return null
      }
      // console.log(`Trying base component for ${this.name}`)
      return () => import(`@components/Base/${this.name}`)
    },

    componentPath() {
      return `components/${this.name}`
    }, // componentPath

    customThemePath() {
      return `${this.getThemeName}/${this.componentPath}`
    }, // customThemePath()
  },
  mounted() {
    this.customThemeLoader()
      .then(() => {
        // If found in the current custom Theme dir, load from there
        this.dynamicComponent = () => this.customThemeLoader()
        this.resolvedPath = `@themes/${this.customThemePath}`
      })
      .catch(() => {
        this.defaultThemeLoader()
          .then(() => {
            // If found in the default Theme dir, load from there
            this.dynamicComponent = () => this.defaultThemeLoader()
            this.resolvedPath = `@restoBaseTheme/${this.defaultThemePath}`
          })
          .catch(() => {
            this.baseComponentLoader()
              .then(() => {
                // Finally, if it can't be found, try the Base folder
                this.dynamicComponent = () => this.baseComponentLoader()
                this.resolvedPath = `@components/Base/${this.name}`
              })
              .catch(() => {
                // If found in the /components dir, load from there
                this.dynamicComponent = () => import(`@components/${this.name}`)
                this.resolvedPath = `@components/${this.name}`
              })
          })
      })
  },
}
</script>

I've tried SO many different approaches but I'm fairly new to functional components and render functions (never got into React).

The roadblock : I can't seem to figure out how to run the chained functions that I call in my original mounted() function. I've tried running it from inside the render function with no success.

Big Question

How can I find and dynamically import the component I'm targeting before I pass that component to the createElement function (or within my single file <template functional><template/>)?

Thanks all you Vue-heads! ✌️

Update: I stumbled across this solution for using the h() render function and randomly loading a component, but I'm not sure how to make it work to accept the name prop...

Answer 1

Late to the party, but I was in a similar situation, where I had a component in charge of conditionally render one of 11 different child components:

<template>
  <v-row>
    <v-col>
      <custom-title v-if="type === 'title'" :data="data" />
      <custom-paragraph v-else-if="type === 'paragraph'" :data="data" />
      <custom-text v-else-if="type === 'text'" :data="data" />
      ... 8 more times
    </v-col>
  </v-row>
</template>

<script>
export default {
  name: 'ProjectDynamicFormFieldDetail',
  components: {
    CustomTitle: () => import('@/modules/path/to/CustomTitle'),
    CustomParagraph: () => import('@/modules/path/to/CustomParagraph'),
    CustomText: () => import('@/modules/path/to/CustomText'),
    ... 8 more times
  },
  props: {
    type: {
      type: String,
      required: true,
    },
    data: {
      type: Object,
      default: null,
    }
  },
}
</script>

which of course is not ideal and pretty ugly.

The functional equivalent I came up with is the following

import Vue from 'vue'

export default {
  functional: true,
  props: { type: { type: String, required: true }, data: { type: Object, default: null } },
  render(createElement, { props: { type, data } } ) {
    // prop 'type' === ['Title', 'Paragraph', 'Text', etc]
    const element = `Custom${type}`
    // register the custom component globally
    Vue.component(element, require(`@/modules/path/to/${element}`).default)
    return createElement(element, { props: { data } })
  }
}

Couple of things:

• lazy imports don't seem to work inside Vue.component, hence require().default is the way to go
• in this case the prop 'type' needs to be formatted, either in the parent component or right here