useMounted

SSR render guard: always false on the server, flips to true after client mount.

When to use

Overlay (Teleport) content, or UI whose first frame depends on localStorage — anything the server shouldn't render gets a v-if guard to avoid hydration mismatches.

Usage

<script setup lang="ts">
import { useMounted } from '@luxeanor/ui'
const mounted = useMounted()
</script>

<template>
  <Teleport v-if="mounted && open" to="body">
    <div class="pop">Overlay</div>
  </Teleport>
</template>

API

useMounted(): Ref<boolean>

Every overlay component in the library (Modal/Drawer/Select/Dropdown/Tooltip/Toast/Confirm) uses this guard — see SSR notes.