Built-in components

Vue ships six built-in components. Four are platform-agnostic and live in runtime-core; two are DOM-specific and live in runtime-dom. They are not "regular" components — the renderer special-cases them via ShapeFlags, and they tightly cooperate with patch() in packages/runtime-core/src/renderer.ts.

Inventory

Component	Package	File
<Teleport>	@vue/runtime-core	packages/runtime-core/src/components/Teleport.ts
<Suspense>	@vue/runtime-core	packages/runtime-core/src/components/Suspense.ts
<KeepAlive>	@vue/runtime-core	packages/runtime-core/src/components/KeepAlive.ts
<BaseTransition>	@vue/runtime-core	packages/runtime-core/src/components/BaseTransition.ts
<Transition>	@vue/runtime-dom	packages/runtime-dom/src/components/Transition.ts
<TransitionGroup>	@vue/runtime-dom	packages/runtime-dom/src/components/TransitionGroup.ts

<BaseTransition> is the platform-agnostic skeleton; <Transition> and <TransitionGroup> add DOM/CSS-class plumbing on top.

Teleport

Renders its children into a different DOM target while keeping logical parent/child relationships in the component tree.

<Teleport to="body">
  <Modal/>
</Teleport>

Implementation highlights (packages/runtime-core/src/components/Teleport.ts):

• The teleport vnode carries a targetAnchor and anchor for keeping insertion stable across renders.
• Teleport.process(...) is invoked from renderer.ts instead of the normal element processing. It resolves the target via querySelector (or accepts an Element/ShadowRoot directly), creates an anchor inside the target, and patches children into it.
• The disabled prop short-circuits to render in place (useful for SSR).
• Teleport.hydrate(...) walks the existing markers (<!--teleport start--> / <!--teleport end-->) for SSR compat. See hydration.
• Children's parent component is still the teleport's logical parent — events, provide/inject, slots all work as if the children were in their original position.

Suspense

Coordinates async children: <Suspense> renders the default slot if every async dependency resolves, otherwise renders the fallback slot.

Implementation highlights (packages/runtime-core/src/components/Suspense.ts, ~27KB):

• A SuspenseBoundary is created on first patch and stored on vnode.suspense. It tracks deps (number of pending async deps), pendingBranch (the in-flight default slot), and activeBranch (the currently shown slot).
• Async components' setup promises register themselves via registerDep (apiAsyncComponent.ts). When resolve() is called and deps === 0, the boundary swaps to the default slot.
• Events pending, resolve, and fallback fire at the right transitions.
• <Suspense> is the integration point for <script setup> top-level await.

KeepAlive

Caches deactivated subtrees so switching back and forth doesn't lose state.

Implementation highlights (packages/runtime-core/src/components/KeepAlive.ts):

• The cache is an LRU keyed by the component definition or by an explicit key. max controls the LRU size; include/exclude filter by component name.
• On unmount of a child, instead of disposing the component, KeepAlive calls _deactivate (a renderer-internal hook that detaches the DOM but leaves the instance alive).
• On reuse, _activate reattaches the DOM and triggers onActivated lifecycle hooks.
• KEEP_ALIVE, COMPONENT_KEPT_ALIVE, and COMPONENT_SHOULD_KEEP_ALIVE shape flags coordinate this with renderer.ts.

BaseTransition

The platform-agnostic skeleton for transitions. It has no DOM or CSS dependence — it provides the lifecycle hooks (beforeEnter, enter, afterEnter, enterCancelled, beforeLeave, leave, afterLeave, leaveCancelled, appear, etc.) and the state machine that decides when to insert/remove children.

Custom renderers wanting transitions implement their own thin wrapper around this. The DOM versions in runtime-dom are exactly such wrappers.

Transition (DOM)

Wraps BaseTransition and adds CSS-class plumbing:

• Class names default to v-enter-from, v-enter-active, v-enter-to, v-leave-from, v-leave-active, v-leave-to. The name prop changes the prefix.
• The hook implementations apply/remove these classes at the right moment, using requestAnimationFrame to avoid forcing layout thrash.
• whenTransitionEnds uses both transitionend and animationend listeners with a fallback timeout in case neither fires.
• mode: "in-out" and mode: "out-in" change the order in which the new and old children are present.

packages/runtime-dom/src/components/Transition.ts is ~14KB; most of it is the class-name resolution and the whenTransitionEnds helper.

TransitionGroup (DOM)

Like <Transition> but for lists. Adds FLIP move animations: when items reorder, it captures the old positions, lets the DOM reflow, captures the new positions, and animates a transform from old to new.

The implementation in packages/runtime-dom/src/components/TransitionGroup.ts:

1. Renders an outer wrapper element (defaults to <span>, override via tag).
2. After children commit, calls getBoundingClientRect() for each previously rendered child.
3. Re-runs getBoundingClientRect() after the new layout.
4. Sets transform: translate(dx, dy) to "freeze" each at its old position.
5. Forces a reflow, then transitions the transform to identity.
6. Cleans up via transitionend.

Why these are special-cased

The runtime has to know about each of these because they break the assumption that "a vnode's children are mounted into its host element" or "an unmounted vnode is gone":

• Teleport breaks the host-element rule.
• Suspense pauses mount until async deps resolve.
• KeepAlive defers unmount.
• Transition delays mount/unmount until CSS animations finish.

The renderer's patch() checks ShapeFlags.TELEPORT, ShapeFlags.SUSPENSE, ShapeFlags.COMPONENT_KEPT_ALIVE, ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE and dispatches to the matching process function or honors the deactivation flag.

Files to know

• packages/runtime-core/src/components/Teleport.ts
• packages/runtime-core/src/components/Suspense.ts
• packages/runtime-core/src/components/KeepAlive.ts
• packages/runtime-core/src/components/BaseTransition.ts
• packages/runtime-dom/src/components/Transition.ts
• packages/runtime-dom/src/components/TransitionGroup.ts
• packages/runtime-core/src/renderer.ts (search for processSuspense, processTeleport, KeepAlive branches)
• packages/shared/src/shapeFlags.ts