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