@amirafa/vue3-pull-to-refresh

Lightweight Vue 3 package that enables a pull-to-refresh experience for touch screens.
36,140 9
vue vue3 vue-component ui-component pull-to-refresh refresh
Install
npm install @amirafa/vue3-pull-to-refresh
Latest Version:1.2.17
Vue:3
License:MIT
Last Updated:Dec 13, 2025
Links: GitHub  ·  npm
Maintainer: amirafa

Vue 3 Pull-to-Refresh

A Vue 3 package that enables a pull-to-refresh experience for touch screens.

Installation

To install the package, use the following command:

npm i @amirafa/vue3-pull-to-refresh

Usage

Props

Prop Type Default Description
distance Number 50 Specifies the height of pulling.
duration Number 2000 Delay (in milliseconds) since the refresh action.
size Number 32 Size of the icon (in pixels).
ratio Number 2.5 Power of reaching the distance.
noreload Boolean false Reload window on refresh.
options Object {} Customization options for icon color and background color.

Options Object Properties

Property Type Default Description
color String #000 The color of the icon.
bgColor String #fff The background color of the icon or element.

Emit

Emit Description
onrefresh Emit after refreshing

Slot

Slot Description
default Customized Element for icon

Example Usage

Here's an example of how to use the vue3-pull-to-refresh component in your Vue 3 project:

<template>
    <Vue3PullToRefresh
        :distance="50"
        :duration="2000"
        :size="32"
        noreload
        :options="{ color: '#111', bgColor: '#fff' }"
        @onrefresh="
            () => {
                console.log('refreshed');
            }
        "
    />
</template>

<script setup lang="ts">
// import Vue3PullToRefresh from "@amirafa/vue3-pull-to-refresh"; deprecated
</script>

Note on @ts-ignore

To prevent TypeScript type-checking errors when importing third-party libraries that may lack complete type definitions, you can use // @ts-ignore above the import statement. This directive tells the TypeScript compiler to ignore the next line, avoiding potential type-related warnings or errors.

Preventing Interference with Chrome Mobile Refresh

To prevent conflicts with the native refresh mechanism on Chrome Mobile, add the following CSS to the body:

html,
body {
    overscroll-behavior-y: contain; /* disables vertical PTR bounce */
}

Changelog

[Version 1.2.17] - 2025-12-13

  • Fix A high-severity vulnerability related to validator.js

[Version 1.2.16] - 2025-11-30

  • Fix janking on reload-mode
  • Fix box-shadow on pulling
  • Add z-index:999999

[Version 1.2.15] - 2025-11-30

  • Fix box-shadow on pulling

[Version 1.2.14] - 2025-11-30

[Version 1.2.13] - 2025-10-24

  • Minor package.json fix

[Version 1.2.12] - 2025-10-21

  • Minor fixes

[Version 1.2.11] - 2025-10-21

Added
  • Add logo

[Version 1.2.10] - 2025-10-21

Updated
  • Rename coefficient to ratio

[Version 1.2.9] - 2025-10-21

Added
  • Add playground

[Version 1.2.8] - 2025-10-21

Updated
  • Remove requirement to import Vue3PullToRefresh from "@amirafa/vue3-pull-to-refresh";

[Version 1.2.7] - 2024-11-06

Updated
  • Remove requirement to import style.css

[Version 1.2.2] - 2024-11-06

Added
  • Github packages config

[Version 1.2.1] - 2024-11-06

Updated
  • add ChangeLog to README

[Version 1.2.1] - 2024-11-06

Fixed
  • bug on interference with touch clicks

Related Packages

vue3-command-dialog

英文文档

1,726 50
ui-component vue-component vue3 command command-dialog command-palette element-plus vant
vue-easy-pull-refresh

Lightweight Vue 3 pull-to-refresh component and composable with touch/mouse gest...

16,765 1
pull-to-refresh refresh vue vue-component vue3 composable gesture mobile pull-down pull-refresh +7
vue-json-tree-view

a JSON Tree View Component in Vue.js

380,792 473
vue-component vuejs
@v-c/picker

picker ui component for vue

57,185 32
vue-component picker
vue-frame-crm

vue components for crm system

15,005
vue vue-component

Version History

Version Released License
1.2.17 MIT
1.2.16 MIT
1.2.13 MIT
1.2.12 MIT
1.2.11 MIT