Lazy Show

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

import { DtLazyShow } from '@dialpad/dialtone-vue';

Slots

Name
Type
default

Slot for main content

Props

Name
Default
Type
appear
false
"true" | "false"

Enable/Disable transition animation

show
false
"true" | "false"

Whether the child slot is shown.

transition
null
string

A valid Vue enter/leave CSS transition name.

Lazy Show documentation last updated Thursday, June 18, 2026