0Pricing
Vue Academy · Lesson

Dynamic Components with render Functions

Switching components by type, component resolution, keeping slots in render functions.

Dynamic Components in Render Functions

Templates use <component :is="..."> to swap components at runtime. In a render function you achieve the same with the resolve helpers and h.

resolveComponent

resolveComponent looks up a globally or locally registered component by its registered name and returns it for use with h.

import { h, resolveComponent } from "vue";

export default {
  render() {
    const Btn = resolveComponent("MyButton");
    return h(Btn, null, () => "Click");
  }
};

All lessons in this course

  1. The h() Function Deep Dive
  2. JSX in Vue 3 with Vite
  3. Dynamic Components with render Functions
  4. Higher-Order Components (HOC) Pattern
← Back to Vue Academy