Vue · all subjects

built-in components

30 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

defineAsyncComponent for lazy-loaded components

The defineAsyncComponent function is used to define an async component that loads another component lazily. It accepts a configuration object with a loader function that returns a dynamic import, and optionally a loadingComponent that displays while the component is loading.

defineAsyncComponent syntax with loader and loadingComponent

defineAsyncComponent accepts an object with at minimum a loader property containing an arrow function that returns import('./ComponentName.vue'). Optionally, a loadingComponent property can specify a component to display during the loading state.

Example of defineAsyncComponent usage

defineAsyncComponent({ loader: () => import('./ExampleRepl.vue'), loadingComponent: ReplLoading }) This example shows how to define an async component ExampleRepl that loads ExampleRepl.vue on demand, displaying the ReplLoading component while it loads.

Teleport example with defer in 3.5+

In Vue 3.5+, Teleport defer prop defers target resolution: <Teleport defer to="#late-div">...</Teleport> followed later by <div id="late-div"></div>

Built-in components used in render functions require explicit import

When using built-in components in render functions, they need to be imported explicitly. For example: import { h, Transition } from 'vue' and then h(Transition, { /* props */ }).

Built-in components do not need registration

Built-in components can be used directly in templates without needing to be registered. They are tree-shakeable: they are only included in the build when they are used.

TransitionGroup default render without wrapper

By default, TransitionGroup does not render a wrapper DOM element, but one can be defined via the tag prop.

Transition example with dynamic component

Dynamic component with transition mode and appear animation: <Transition name="fade" mode="out-in" appear><component :is="view"></component></Transition>

KeepAlive example with include using different formats

KeepAlive include prop can be specified as: comma-delimited string "a,b", regex /a|b/ (with v-bind), or array ['a', 'b'] (with v-bind). Example: <KeepAlive include="a,b"><component :is="view"></component></KeepAlive>

Transition example with key change

To force a transition when content doesn't change structurally, use the :key attribute to force re-mounting: <Transition><div :key="text">{{ text }}</div></Transition>

Transition component props interface

The Transition component accepts these props: name (string, used to auto-generate CSS class names like .fade-enter), css (boolean, default true, applies CSS transition classes), type (string 'transition' or 'animation', auto-detects by default), duration (number or object with enter and leave numbers, waits for first transitionend/animationend by default), mode (string 'in-out', 'out-in', or 'default', default is simultaneous), appear (boolean, default false, applies transition on initial render), enterFromClass (string), enterActiveClass (string), enterToClass (string), appearFromClass (string), appearActiveClass (string), appearToClass (string), leaveFromClass (string), leaveActiveClass (string), and leaveToClass (string) for custom transition class names.

Transition component events

The Transition component emits these events: @before-enter, @before-leave, @enter, @leave, @appear, @after-enter, @after-leave, @after-appear, @enter-cancelled, @leave-cancelled (v-show only), and @appear-cancelled.

Transition component works on single element or component

The Transition built-in component provides animated transition effects to a single element or component. It should wrap only one child element.

TransitionGroup component props

TransitionGroup accepts the same props as Transition except mode, plus two additional props: tag (string, if not defined renders as a fragment, defines wrapper DOM element), and moveClass (string, customizes CSS class applied during move transitions, auto-generated from name attribute by default).

TransitionGroup works on multiple elements

TransitionGroup provides transition effects for multiple elements or components in a list. It supports moving transitions via CSS transform using the FLIP technique. Every child must be uniquely keyed for animations to work properly.

TransitionGroup emits same events as Transition

TransitionGroup emits the same events as Transition: @before-enter, @before-leave, @enter, @leave, @appear, @after-enter, @after-leave, @after-appear, @enter-cancelled, @leave-cancelled, and @appear-cancelled.

KeepAlive component caches toggled components

KeepAlive is a built-in component that caches dynamically toggled components wrapped inside without destroying them. Only one active component instance can be the direct child of KeepAlive at any time.

KeepAlive component props interface

KeepAlive accepts these props: include (MatchPattern - string, RegExp, or array of strings/RegExp, only components with matching names are cached), exclude (MatchPattern, components with matching names are not cached), and max (number or string, maximum number of component instances to cache).

KeepAlive lifecycle hooks activation and deactivation

When a component is toggled inside KeepAlive, its activated and deactivated lifecycle hooks are invoked instead of mounted and unmounted. This applies to the direct child and all descendants of KeepAlive.

Teleport component renders slot to different DOM location

Teleport is a built-in component that renders its slot content to another part of the DOM, specified by the target container.

Teleport component props interface

Teleport accepts these props: to (required, string selector or HTMLElement, specifies target container), disabled (boolean, default false, when true keeps content in original location instead of moving to target, can be changed dynamically), and defer (boolean, default false, added in 3.5+, when true defers resolution of target until other application parts have mounted).

Suspense component orchestrates async dependencies

Suspense is an experimental built-in component used for orchestrating nested async dependencies in a component tree. It accepts two slots: the default slot (rendered in memory initially) and the fallback slot (displayed while default slot dependencies resolve).

Suspense component props interface

Suspense accepts these props: timeout (string or number) and suspensible (boolean, when set to true, all async dependency handling will be delegated to parent Suspense).

Suspense component events

Suspense emits these events: @resolve (when dependencies resolve), @pending (when entering pending state), and @fallback (when fallback slot is displayed).

Suspense waits for async dependencies before displaying

When Suspense encounters async dependencies (async components and components with async setup()) while rendering the default slot, it waits until all are resolved before displaying the default slot.

<slot> element props interface

The <slot> element has the following interface: interface SlotProps { /** * Any props passed to <slot> to passed as arguments * for scoped slots */ [key: string]: any /** * Reserved for specifying slot name. */ name?: string } Any props passed to the <slot> element are passed as arguments for scoped slots. The `name` attribute specifies the slot name.

<slot> name attribute specifies slot name

The <slot> element can use the `name` attribute to specify a slot name. When no `name` is specified, it will render the default slot. The element itself will be replaced by its matched slot content.

<slot> additional attributes are passed as slot props

Additional attributes passed to the <slot> element will be passed as slot props to the scoped slot defined in the parent.

<component>, <slot>, and <template> are not true components

<component>, <slot>, and <template> are component-like features and part of the template syntax. They are not true components and are compiled away during template compilation. As such, they are conventionally written with lowercase in templates.

<slot> denotes slot content outlets in templates

The <slot> element denotes slot content outlets in templates. It is a built-in special element, not a true component, and is compiled away during template compilation.

Give your agent this brain