DEV Community

loading...
Cover image for Vue3 DeferredContent

Vue3 DeferredContent

primetek profile image PrimeTek ・1 min read

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';
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (2)

pic
Editor guide
Collapse
devlorenzo profile image
DevLorenzo

Hello, I need to contact you, possibly here at dev.to. Can you please follow me as I can write you in private?
Thank

Collapse
primetek profile image
PrimeTek Author

Hi, You can contact us via primetek.com.tr/#contact. Thank you.