Presence

Headless Presence; covers CSS animations, CSS transitions, View Transitions.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/ui

Add the public import below to <script setup lang="ts">. Components provide behavior without styles; the preview uses optional Paper styles.

import { Presence } from "@vizejs/ui/presence";

Or copy the source into your project with vize lib pull presence (see Source Distribution).

Try it

This is the basic example maintained with the component source, using the public package imports. The preview adds the optional Paper styles.

Open the interactive example · Styling these components

Copy the example

<!-- Presence host that mounts and unmounts details through explicit enter and exit phases. -->
<script setup lang="ts">
import { nextTick, ref, useId, useTemplateRef } from "vue";

import { Presence } from "@vizejs/ui/presence";

const open = ref(false);
const detailsId = useId();
const presence = useTemplateRef<InstanceType<typeof Presence>>("presence");

async function toggle(): Promise<void> {
  open.value = !open.value;
  await nextTick();
  // No CSS animation is attached here, so finish the phase explicitly.
  presence.value?.completeAnimation();
}
</script>

<template>
  <div>
    <button type="button" :aria-expanded="open" :aria-controls="detailsId" @click="toggle">
      Shipping details
    </button>
    <Presence ref="presence" :present="open">
      <template #default="{ status }">
        <p :id="detailsId" :data-status="status">Orders ship within two business days.</p>
      </template>
    </Presence>
  </div>
</template>

API

Presence

Source: src/families/overlays/presence/presence.vue

Props

Slots

Exposed

Behavior

Normative state × input → outcome table for presence.vue (@vizejs/ui/presence). Every row is proven by the named test in src/families/overlays/presence/presence.test.ts or src/families/overlays/presence/presence-ssr.test.ts; compile-only assertions live in src/families/overlays/presence/presence.types.test-d.ts.