Lazy Show

Storybook

Lazy show is a utility component that prevents its children from being rendered until the first time it is shown.

Preview

DtLazyShow is essentially a combination of a v-if and v-show. This means that the child slot will not be rendered/initialized until the first time show is true, after which the slot will stay in the DOM and be hidden/shown with the v-show directive. This is useful to prevent elements which are hidden from being rendered immediately, but keeping them alive when toggled later.

The lazy show wraps the slot in a parent div in order to achieve this. It also wraps the v-show in a transition, so you can pass any valid Vue transition class to control the enter/leave transitions.

Vue API

Slots

Name
Description
default

Slot for main content

Props

Name
Description
Default
appear

Enable/Disable transition animation

Type: boolean
Values: truefalse
false
show

Whether the child slot is shown.

Type: boolean
Values: truefalse
false
transition

A valid Vue enter/leave CSS transition name.

Type: string
null
Lazy Show documentation last updated Thursday, June 11, 2026