Usage

Basic example

Automatically refresh content when users pull down. The child component re-renders and updates with new state, making it a seamless way to fetch fresh data.

Preview

Show code

<template>
    <VueEasyPullRefresh>
        <!-- content -->
    </VueEasyPullRefresh>
</template>

Custom Loader

Easily customize the loading indicator by using the loader slot. Replace the default spinner with your own design to match your app's style.

Preview

Show code

<template>
    <VueEasyPullRefresh>
        <template #loader>
            <!-- custom loader -->
        </template>
        <!-- content -->
    </VueEasyPullRefresh>
</template>

Controlled Refresh

Use useEasyPullRefresh to queue async requests during a refresh, ensuring the content updates only after all operations are complete.

Preview

Show code

*.vue

<template>
    <VueEasyPullRefresh :is-refresh-content="false">
        <ChildComponent>
            <DeepChildComponent>
        </ChildComponent>
    </VueEasyPullRefresh>
</template>

ChildComponent.vue

<script setup>
    import { useEasyPullRefresh } from 'vue-easy-pull-refresh';

    const { pullDownQueueAdd } = useEasyPullRefresh();

    const request1 = Promise.resolve;

    pullDownQueueAdd(request1);
</script>

DeepChildComponent.vue

<script setup>
    import { useEasyPullRefresh } from 'vue-easy-pull-refresh';

    const { pullDownQueueAdd } = useEasyPullRefresh();

    const request2 = Promise.resolve;

    pullDownQueueAdd(request2);
</script>

Controlled Refresh at Component Level

Use useEasyPullRefresh to manage pull-to-refresh and queue async requests directly within the component, ensuring content updates after all operations are finished.

Preview

Show code

<template>
    <VueEasyPullRefresh
        ref="refRefresh"
        :is-refresh-content="false"
    >
        <!-- content -->
    </VueEasyPullRefresh>
</template>

<script setup>
    import { useEasyPullRefresh } from 'vue-easy-pull-refresh';

    const { refRefresh, pullDownQueueAdd } = useEasyPullRefresh();

    const request = Promise.resolve;

    pullDownQueueAdd(request);
</script>