Built-in Components | Vue.js

Reactivity: Utilities
Reactivity: Advanced
Dependency Injection
Options: Composition
Syntax Specification
Server-Side Rendering
TypeScript Utility Types
Registration and Usage
Built-in components can be used directly in templates without needing to be registered. They are also tree-shakeable: they are only included in the build when they are used.
When using them in render functions, they need to be imported explicitly. For example:
Provides animated transition effects to a single element or component.
Forcing a transition by changing the key attribute:
Dynamic component, with transition mode + animate on appear:
Listening to transition events:
See also Guide - Transition
Provides transition effects for multiple elements or components in a list.
<TransitionGroup> accepts the same props as <Transition> except mode, plus two additional props:
<TransitionGroup> emits the same events as <Transition>.
By default, <TransitionGroup> doesn't render a wrapper DOM element, but one can be defined via the tag prop.
Note that every child in a <transition-group> must be uniquely keyed for the animations to work properly.
<TransitionGroup> supports moving transitions via CSS transform. When a child's position on screen has changed after an update, it will get applied a moving CSS class (auto generated from the name attribute or configured with the move-class prop). If the CSS transform property is "transition-able" when the moving class is applied, the element will be smoothly animated to its destination using the FLIP technique.
See also Guide - TransitionGroup
Caches dynamically toggled components wrapped inside.
When wrapped around a dynamic component, <KeepAlive> caches the inactive component instances without destroying them.
There can only be one active component instance as the direct child of <KeepAlive> at any time.
When a component is toggled inside <KeepAlive>, its activated and deactivated lifecycle hooks will be invoked accordingly, providing an alternative to mounted and unmounted, which are not called. This applies to the direct child of <KeepAlive> as well as to all of its descendants.
When used with v-if / v-else branches, there must be only one component rendered at a time:
Used together with <Transition>:
Using include / exclude:
See also Guide - KeepAlive
Renders its slot content to another part of the DOM.
Specifying target container:
Conditionally disabling:
Defer target resolution :
See also Guide - Teleport
Used for orchestrating nested async dependencies in a component tree.
<Suspense> accepts two slots: the #default slot and the #fallback slot. It will display the content of the fallback slot while rendering the default slot in memory.
If it encounters async dependencies (Async Components and components with async setup()) while rendering the default slot, it will wait until all of them are resolved before displaying the default slot.
By setting the Suspense as suspensible, all the async dependency handling will be handled by the parent Suspense. See implementation details
See also Guide - Suspense