`<component :is>`

Renders a component or element dynamically chosen at runtime.

Since Vue 3.0 Spec ↗

Syntax

<component :is="componentOrName" />

Parameters

Name	Type	Required	Description
`is`	`Component \| string`	No	The component definition, registered name, or HTML tag.

Returns

component — Renders the resolved component/element.

Examples

<script setup lang="ts">
import { shallowRef } from 'vue';
import Home from './Home.vue';
import About from './About.vue';

const view = shallowRef(Home);
</script>

<template>
  <button @click="view = Home">Home</button>
  <button @click="view = About">About</button>
  <component :is="view" />
</template>

Notes

`:is` accepts an imported component, a globally registered name string, or an HTML tag name. Store the component in shallowRef (not ref) to avoid unnecessary deep reactivity. Wrap with <KeepAlive> to preserve state across switches and <Transition> to animate them.