vue-easy-pull-refresh

VueEasyPullRefresh

Lightweight pull-to-refresh component for Vue 3. Works on both mobile (touch) and desktop (mouse). Bring-your-own loader, register async tasks from anywhere in the tree, and fine-tune the refresh animation.

Live demo & full docs →

Features

• Vue 3 only, no extra runtime dependencies
• Touch and mouse gesture support
• Customizable loader via a named slot
• Register async tasks (pullDownQueueAdd) from any descendant — the loader waits for the slowest one
• Freeze the content swap until the loader is fully hidden
• Ships ESM + UMD builds with TypeScript declarations

Requirements

• Vue >= 3.0 (peer dependency)
• Node >= 20 (dev only)

Installation

npm install vue-easy-pull-refresh

Quick start

<template>
    <VueEasyPullRefresh>
        <YourContent />
    </VueEasyPullRefresh>
</template>

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

Props

Events

Slots

Example: refresh an API call

Pass an async callback via initial-queue — it runs on every pull-down refresh, and the loader stays visible until the promise resolves.

<template>
    <VueEasyPullRefresh :initial-queue="load">
        <FeedList />
    </VueEasyPullRefresh>
</template>

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

function load() {
    return fetch('/api/feed').then(r => r.json());
}
</script>

For multiple tasks across children, custom loaders, and more — see the full docs.

License

MIT — see LICENSE.