How do dynamic components work? | Interview Question

Q: How do dynamic components work?

**Target Audience:** Developers who know basic Vue templates and components and want to understand runtime component switching. **Difficulty:** Medium > **How to read this doc:** Ideas are explained in plain language first, then tagged with 📌 Interview term: so you also learn the words an interviewer listens for. Every output block in this doc was produced by compiling and running the code on Vue 3.5.44, either with the repo's verify-vue-example.mjs harness (compile the SFC, mount it in jsdom) or with a small Node script. ## 1. Why This Even Matters — A Story First Picture a theatre with one stage and a cast of five plays. The stage does not change; what changes is which play is on it tonight. A stagehand reads tonight's poster and wheels the right set onto the stage. When the next play starts, the old set is wheeled off and broken down, and the new one is built from scratch. <component :is> is that stage. You put one placeholder in you

The problem

Question presented to candidate: "Our settings page has five tabs and the tab bar is driven by config from the server. Instead of a long v-if / v-else-if chain, a colleague used <component :is>. Explain how that works, what you can pass to :is, and what happens to a tab's state when the user switches away."

What a strong answer should cover:

<component :is="x"> is a built-in placeholder; the compiler turns it into resolveDynamicComponent(x) and renders whatever that returns.
:is accepts a component object (the usual case in <script setup>), a registered component name string, or a plain HTML tag name.
Holding a component object in state should use shallowRef or markRaw; ref() makes it deeply reactive and Vue warns about it.
Switching :is unmounts the old component and mounts the new one, so local state is lost unless the switch is wrapped in <KeepAlive>.
Props, attrs, events and slots passed to <component> go to whichever component is current, so tabs need a compatible interface.
An unknown string name silently renders as a custom element, so typos do not throw.

Clarifying questions expected:

"Should a tab keep its half-filled form when the user switches away and back?"
"Is the list of tabs fixed at build time, or does it come from data at runtime?"

Code / implementation expected: Yes — a small tab switcher with <component :is> and a note on what switching does to state.

dynamic-components

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Developers who know basic Vue templates and components and want to understand runtime component switching. Difficulty: Medium

How to read this doc: Ideas are explained in plain language first, then tagged with 📌 Interview term: so you also learn the words an interviewer listens for. Every output block in this doc was produced by compiling and running the code on Vue 3.5.44, either with the repo's verify-vue-example.mjs harness (compile the SFC, mount it in jsdom) or with a small Node script.

1. Why This Even Matters — A Story First

Picture a theatre with one stage and a cast of five plays. The stage does not change; what changes is which play is on it tonight. A stagehand reads tonight's poster and wheels the right set onto the stage. When the next play starts, the old set is wheeled off and broken down, and the new one is built from scratch.

<co

The solution is hidden so you can try first

10 min read · 10 sections

Read the code

VueTab switcher with <component :is>, a shallowRef and a dynamic wrapper tag

Open in playground

<script setup>
import { ref, shallowRef, defineComponent, h, onMounted, onUnmounted } from "vue";

// Three tab bodies, defined inline so this file is self-contained.
const Profile = defineComponent({
  name: "Profile",
  setup() {
    const draft = ref("");
    onMounted(() => console.log("[Profile] mounted"));
    onUnmounted(() => console.log("[Profile] unmounted"));
    return () =>
      h("label", ["Bio: ", h("input", { value: draft.value, onInput: (e) => (draft.value = e.target.value) })]);
  },
});
const Billing = defineComponent({
  name: "Billing",
  props: { plan: String },
  setup(props) {
    onMounted(() => console.log("[Billing] mounted"));
    onUnmounted(() => console.log("[Billing] unmounted"));
    return () => h("p", `Plan: ${props.plan}`);
  },
});

const tabs = { Profile, Billing };
// shallowRef: hold the component object itself, do not make it deeply reactive.
const current = shallowRef(Profile);
// :is also accepts a plain HTML tag name.
const wrapper = ref("section");
</script>

<template>
  <nav>
    <button v-for="(comp, name) in tabs" :key="name" @click="current = comp">{{ name }}</button>
    <button @click="wrapper = wrapper === 'section' ? 'article' : 'section'">Toggle wrapper</button>
  </nav>
  <component :is="wrapper" class="panel">
    <component :is="current" plan="Pro" />
  </component>
</template>

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.