Vue3 BlockUI

Vue3 BlockUI can either block other components or the whole page. It supports Vue 3 with PrimeVue 3 and Vue 2 with PrimeVue 2.

Setup

Refer to PrimeVue setup documentation for download and installation steps for your environment such as Vue CLI, Vite or browser.

Import

import BlockUI from 'primevue/blockui';

Getting Started

BlockUI is controlled using the blocked property, by default target element to block is the child component. In example below, panel gets blocked with a mask when blockedPanel is enabled and gets unblock when the bound variable is set to false.

<BlockUI :blocked="blockedPanel">
    <Panel header="Header">
        Panel Content
    </Panel>
</BlockUI>

export default {
    data() {
        return {
            blockedPanel: false
        }
    },
    methods: {
        blockPanel() {
            this.blockedPanel = true;
        },
        unblockPanel() {
            this.blockedPanel = false;
        }
    }
}

Full Screen

In full screen mode, instead of a particular element, the whole document gets blocked. Set fullScreen as true in order to enable this functionality.

<BlockUI :blocked="blockedDocument" :fullScreen="true"></BlockUI>

Theming

BlockUI supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeVue BlockUI showcase for demos and documentation.