Vue3 DeferredContent

Vue3 DeferredContent postpones the loading the content that is initially not in the viewport until it becomes visible on scroll. 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 DeferredContent from 'primevue/deferredcontent';

Getting Started

DeferredContent is used as a wrapper element of its content..

<DeferredContent>
    <DataTable :value="cars">
        <Column field="vin" header="Vin"></Column>
        <Column field="year" header="Year"></Column>
        <Column field="brand" header="Brand"></Column>
        <Column field="color" header="Color"></Column>
    </DataTable>
</DeferredContent>

Load Event

onLoad callback is useful to initialize the content when it becomes visible on scroll such as loading data.

<DeferredContent @load="onDataLoad">
    <DataTable :value="cars">
        <Column field="vin" header="Vin"></Column>
        <Column field="year" header="Year"></Column>
        <Column field="brand" header="Brand"></Column>
        <Column field="color" header="Color"></Column>
    </DataTable>
</DeferredContent>

Theming

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

Resources

Visit the PrimeVue DeferredContent showcase for demos and documentation.