BuiltInComponents

Built-In Components
component

Props:is - string | ComponentDefinition | ComponentConstructorinline-template - booleanUsage:A “meta component” for rendering dynamic components. The actual component to render is determined by the is prop:


See also: Dynamic Components


transition

Props:name - string, Used to automatically generate transition CSS class names. e.g. name: &＃39;fade&＃39; will auto expand to .fade-enter, .fade-enter-active, etc. Defaults to "v".appear - boolean, Whether to apply transition on initial render. Defaults to false.css - boolean, Whether to apply CSS transition classes. Defaults to true. If set to false, will only trigger Javascript hooks registered via component events.type - string, Specifies the type of transition events to wait for to determine transition end timing. Available values are "transition" and "animation". By default, it will automatically detect the type that has a longer duration.mode - string, Controls the timing sequence of leaving/entering transitions. Available modes are "out-in" and "in-out"; defaults to simultaneous.duration - number | { enter: number, leave: number }, Specifies the duration of transition. By default, Vue waits for the first transitionend or animationend event on the root transition element.enter-class - stringleave-class - stringappear-class - stringenter-to-class - stringleave-to-class - stringappear-to-class - stringenter-active-class - stringleave-active-class - stringappear-active-class - stringEvents:before-enterbefore-leavebefore-appearenterleaveappearafter-enterafter-leaveafter-appearenter-cancelledleave-cancelled (v-show only)appear-cancelledUsage: serve as transition effects for single element/component. The only applies the transition behavior to the wrapped content inside; it doesn’t render an extra DOM element, or show up in the inspected component hierarchy.


transition-group

Props:tag - string, defaults to span.move-class - overwrite CSS class applied during moving transition.exposes the same props as except mode.Events:exposes the same events as .Usage: serve as transition effects for multiple elements/components. The renders a real DOM element. By default it renders a , and you can configure what element it should render via the tag attribute.Note every child in a must be uniquely keyed for the animations to work properly. 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 attribute). 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.

keep-alive

Props:include - string or RegExp or Array. Only components with matching names will be cached.exclude - string or RegExp or Array. Any component with a matching name will not be cached.max - number. The maximum number of component instances to cache.Usage:When wrapped around a dynamic component, caches the inactive component instances without destroying them. Similar to , is an abstract component: it doesn’t render a DOM element itself, and doesn’t show up in the component parent chain.When a component is toggled inside , its activated and deactivated lifecycle hooks will be invoked accordingly.In 2.2.0&＃43; and above, activated and deactivated will fire for all nested components inside a tree.Primarily used to preserve component state or avoid re-rendering.


1">


Note, is designed for the case where it has one direct child component that is being toggled. It does not work if you have v-for inside it. When there are multiple conditional children, as above, requires that only one child is rendered at a time.include and excludeNew in 2.1.0&＃43;The include and exclude props allow components to be conditionally cached. Both props can be a comma-delimited string, a RegExp or an Array:





The match is first checked on the component’s own name option, then its local registration name (the key in the parent’s components option) if the name option is not available. Anonymous components cannot be matched against.maxNew in 2.5.0&＃43;The maximum number of component instances to cache. Once this number is reached, the cached component instance that was least recently accessed will be destroyed before creating a new instance.
does not work with functional components because they do not have instances to be cached.See also: Dynamic Components - keep-alive


slot

Props:name - string, Used for named slot.Usage: serve as content distribution outlets in component templates. itself will be replaced.For detailed usage, see the guide section linked below.See also: Content Distribution with Slots


VNode Interface

Please refer to the VNode class declaration.


Server-Side Rendering

Please refer to the vue-server-renderer package documentation.


Caught a mistake or want to contribute to the documentation? Edit this on GitHub! Deployed on Netlify .