BlockUI

Headless region primitive for consumer-owned blocked, busy, and stale states.

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 { BlockUI } from "@vizejs/ui/block-ui";

Or copy the source into your project with vize lib pull block-ui (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

<!-- Settings region made inert and busy while a save is in progress, with a polite status label. -->
<script setup lang="ts">
import { ref, useId } from "vue";

import { BlockUI } from "@vizejs/ui/block-ui";

const saving = ref(false);
const inputId = useId();
</script>

<template>
  <div>
    <BlockUI
      v-slot="{ blocked }"
      as="div"
      :blocked="saving"
      reason="saving"
      interaction="inert"
      announce="polite"
      :label="saving ? 'Saving settings' : ''"
    >
      <label :for="inputId">Display name</label>
      <input :id="inputId" name="display-name" value="Ada Lovelace" />
      <p v-if="blocked">Saving your changes…</p>
    </BlockUI>
    <button type="button" @click="() => (saving = !saving)">
      {{ saving ? "Finish saving" : "Save settings" }}
    </button>
  </div>
</template>

API

BlockUI

Source: src/families/feedback/block-ui/block-ui.vue

Props

Slots

Exposed

Behavior

Normative state x input -> outcome table for block-ui.vue (@vizejs/ui/block-ui). Every row is proven by the named mounted-DOM, SSR, type, renderer, size, and tree-shaking gates.

Props

Slots

Expose

Attributes

BlockUI emits no visual CSS, generates no ids, owns no focus trap, and stores no request-global state.