use-delayed-render-vue

Vue composable for delayed rendering with enter/exit transitions.

Installation

pnpm add use-delayed-render-vue

Usage

<script setup lang="ts">
import { ref } from 'vue'
import { useDelayedRender } from 'use-delayed-render-vue'

const active = ref(false)

const { mounted, rendered } = useDelayedRender(active, {
  enterDelay: 300,
  exitDelay: 200,
  onUnmount: () => console.log('unmounted')
})
</script>

<template>
  <div v-if="mounted" :class="{ visible: rendered }">
    Delayed content
  </div>
</template>

API

useDelayedRender(active, options?)

Parameters

• active MaybeRefOrGetter<boolean> — controls mount/unmount cycle (default: false)
• options MaybeRefOrGetter<Options> — configuration object

Options

| Property | Type | Default | Description | |-------------|------------|---------|--------------------------------------------| | enterDelay | number | 1 | Delay in ms before rendered becomes true | | exitDelay | number | 0 | Delay in ms before mounted becomes false | | onUnmount | () => void | — | Callback fired when the component unmounts |

Return

| Property | Type | Description | |------------|---------------------|-------------------------------------------------| | mounted | Readonly<Ref<boolean>> | Whether the element should be in the DOM | | rendered | Readonly<Ref<boolean>> | Whether the element is visible (after enter delay) |

License

MIT