stack/packages/mosaic/framework/skills/vue-best-practices/reference/rendering-resolve-component-for-string-names.md

title, impact, impactDescription, type, tags

title	impact	impactDescription	type	tags
Use resolveComponent for String Component Names in Render Functions	HIGH	String component names don't work in Vue 3 render functions; causes silent failures or runtime errors	gotcha	vue3 render-function components resolveComponent migration

Use resolveComponent for String Component Names in Render Functions

Impact: HIGH - In Vue 2, render functions could use string names for globally or locally registered components. In Vue 3, you must either import components directly or use resolveComponent(). Using string names causes components to render as HTML elements or fail silently.

Task Checklist

• Import components directly when possible (preferred)
• Use resolveComponent() for dynamically registered components
• Use resolveDynamicComponent() for <component :is=""> equivalent
• Call resolveComponent() inside setup() or the render function
• Handle the case when component is not found

Incorrect:

import { h } from 'vue';

export default {
  render() {
    // WRONG: String names don't resolve to components
    return h('div', [
      h('my-component', { value: 1 }), // Renders <my-component> HTML element!
      h('router-link', { to: '/' }, 'Home'), // Also fails
    ]);
  },
};

Correct (Direct Import - Preferred):

import { h } from 'vue';
import MyComponent from './MyComponent.vue';
import { RouterLink } from 'vue-router';

export default {
  render() {
    return h('div', [h(MyComponent, { value: 1 }), h(RouterLink, { to: '/' }, () => 'Home')]);
  },
};

Correct (resolveComponent for Registered Components):

import { h, resolveComponent } from 'vue'

export default {
  components: {
    MyComponent: () => import('./MyComponent.vue')
  },

  setup() {
    // Resolve inside setup - component context is available
    const MyComponent = resolveComponent('MyComponent')

    return () => h('div', [
      h(MyComponent, { value: 1 })
    ])
  }
}

// Or resolve inside render function
export default {
  render() {
    const MyComponent = resolveComponent('MyComponent')
    const RouterLink = resolveComponent('RouterLink')

    return h('div', [
      h(MyComponent, { value: 1 }),
      h(RouterLink, { to: '/' }, () => 'Home')
    ])
  }
}

When to Use Each Approach

Approach	Use When
Direct Import	Component is known at build time (most common)
resolveComponent()	Component is registered globally or locally by name
resolveComponent()	Dynamic component selection from registered set

Handling Missing Components

import { h, resolveComponent } from 'vue';

export default {
  setup() {
    // resolveComponent returns the component or the string name if not found
    const DynamicComponent = resolveComponent('MaybeRegistered');

    // Check if resolution succeeded
    if (typeof DynamicComponent === 'string') {
      console.warn(`Component "${DynamicComponent}" not found`);
    }

    return () => h(DynamicComponent, { value: 1 });
  },
};

Dynamic Component Selection

import { h, resolveComponent, computed } from 'vue';

export default {
  props: ['componentName'],

  setup(props) {
    // For truly dynamic components, resolve in render function
    return () => {
      const Component = resolveComponent(props.componentName);
      return h(Component, {
        /* props */
      });
    };
  },
};

For the equivalent of <component :is="componentName">, use resolveDynamicComponent:

import { h, resolveDynamicComponent } from 'vue';

export default {
  props: ['componentType'],
  setup(props) {
    return () => {
      // Resolves string names, component objects, or built-in elements
      const component = resolveDynamicComponent(props.componentType);
      return h(component, {
        /* props */
      });
    };
  },
};

Practical Example: Tab Component

import { h, resolveComponent, ref } from 'vue';

export default {
  setup() {
    const currentTab = ref('TabA');
    const tabs = ['TabA', 'TabB', 'TabC'];

    return () =>
      h('div', [
        // Tab buttons
        h(
          'div',
          { class: 'tabs' },
          tabs.map((tab) =>
            h(
              'button',
              {
                key: tab,
                class: { active: currentTab.value === tab },
                onClick: () => (currentTab.value = tab),
              },
              tab,
            ),
          ),
        ),

        // Dynamic component based on current tab
        h(resolveComponent(currentTab.value)),
      ]);
  },
};

Resolving Built-in Components

For built-in components like <Transition> or <KeepAlive>, import them directly from Vue:

import { h, Transition, KeepAlive, Teleport, Suspense } from 'vue';

export default {
  setup() {
    return () => h(Transition, { name: 'fade' }, () => h('div', 'Content'));
  },
};

Resolving Directives

Similar pattern for custom directives:

import { h, resolveDirective, withDirectives } from 'vue';

export default {
  render() {
    const vFocus = resolveDirective('focus');

    return withDirectives(h('input', { type: 'text' }), [[vFocus]]);
  },
};

Migration from Vue 2

// Vue 2 (worked with registered components)
render(h) {
  return h('my-component', { props: { value: 1 } })
}

// Vue 3 (must resolve or import)
import { h, resolveComponent } from 'vue'

render() {
  const MyComponent = resolveComponent('my-component')
  return h(MyComponent, { value: 1 })  // Note: props go directly, not in 'props' key
}

Reference

• Vue 3 Migration - Render Function API
• Vue.js Render Function API - resolveComponent