{"id":15280,"library":"vue-scroller","title":"Vue Scroller","description":"Vue Scroller is a Vue 2 component designed to provide smooth scrolling capabilities, including features like pull-to-refresh and infinite loading. It served as a foundational component for the Vonic UI framework. The package is currently at version 2.2.4 on npm, with the last update approximately four years ago. This indicates that it is tailored specifically for Vue 2 environments and is not actively maintained for compatibility with Vue 3 or newer ecosystems. Its primary differentiators lie in its straightforward API for implementing common mobile-like scrolling patterns within Vue 2 applications. Due to its age, new projects are generally advised to seek more modern, actively maintained alternatives, especially if targeting Vue 3.","status":"maintenance","version":"2.2.4","language":"javascript","source_language":"en","source_url":"https://github.com/wangdahoo/vue-scroller","tags":["javascript","vue","scroll","pulltorefresh","pull to refresh","pull-to-refresh","infinite load"],"install":[{"cmd":"npm install vue-scroller","lang":"bash","label":"npm"},{"cmd":"yarn add vue-scroller","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-scroller","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime dependency for the component, specifically designed for Vue 2.x applications.","package":"vue","optional":false}],"imports":[{"note":"VueScroller is a default export. Ensure you import it as such.","wrong":"import { VueScroller } from 'vue-scroller';","symbol":"VueScroller","correct":"import VueScroller from 'vue-scroller';"},{"note":"Vue Scroller registers itself globally as a component named 'scroller' when Vue.use() is called.","wrong":"new Vue({\n  components: { VueScroller }\n});","symbol":"plugin installation","correct":"import Vue from 'vue';\nimport VueScroller from 'vue-scroller';\n\nVue.use(VueScroller);"},{"note":"For CommonJS environments, the default export needs to be explicitly accessed after requiring the module.","wrong":"const VueScroller = require('vue-scroller');","symbol":"CommonJS (older Node/builds)","correct":"const VueScroller = require('vue-scroller').default;"}],"quickstart":{"code":"import Vue from 'vue';\nimport VueScroller from 'vue-scroller';\n\nVue.use(VueScroller);\n\nnew Vue({\n  el: '#app',\n  template: `\n    <div style=\"height: 300px; border: 1px solid #ccc;\">\n      <scroller \n        :on-refresh=\"refresh\" \n        :on-infinite=\"infinite\"\n        height=\"100%\"\n      >\n        <p v-for=\"item in items\" :key=\"item\">{{ item }}</p>\n      </scroller>\n    </div>\n  `,\n  data: {\n    items: []\n  },\n  methods: {\n    refresh(done) {\n      console.log('Refreshing data...');\n      setTimeout(() => {\n        this.items = Array.from({ length: 20 }, (_, i) => `Refreshed Item ${i + 1}`);\n        done(); // Signal that refresh is complete\n      }, 1500);\n    },\n    infinite(done) {\n      console.log('Loading more data...');\n      setTimeout(() => {\n        const newItems = Array.from({ length: 10 }, (_, i) => `Loaded Item ${this.items.length + i + 1}`);\n        this.items.push(...newItems);\n        if (this.items.length >= 50) {\n          done(true); // Signal no more data\n        } else {\n          done(); // Signal loading is complete\n        }\n      }, 1000);\n    }\n  },\n  mounted() {\n    this.refresh(() => {}); // Initial load\n  }\n});","lang":"javascript","description":"Demonstrates basic setup, pull-to-refresh, and infinite loading functionality within a Vue 2 application using a global component registration."},"warnings":[{"fix":"For Vue 3 projects, consider using more modern alternatives like 'vue-virtual-scroller', 'vue-scrollto', or implementing custom solutions with Vue's reactivity system. If migrating a Vue 2 project, plan to replace this component.","message":"Vue Scroller is designed for Vue 2.x and is not compatible with Vue 3.x without significant modifications or community-maintained forks. Attempting to use it directly in a Vue 3 project will result in errors.","severity":"breaking","affected_versions":"All versions >=2.x when used with Vue 3"},{"fix":"Remove any manual calls to `this.$refs.scroller.resize()`. Rely on the component's automatic resizing behavior or trigger updates via Vue's reactivity system if content changes dynamically in ways not automatically detected.","message":"The `resize()` instance method for the scroller component is deprecated. The scroller content is designed to resize itself automatically.","severity":"deprecated","affected_versions":">=2.x"},{"fix":"Always explicitly set `refreshText` and `noDataText` attributes to your desired language strings, e.g., `:refresh-text=\"'Pull to refresh'\"` and `:no-data-text=\"'No more data'\"`.","message":"The default `refreshText` and `noDataText` attributes are set to Chinese characters ('下拉刷新' and '没有更多数据' respectively).","severity":"gotcha","affected_versions":">=2.x"},{"fix":"For new projects, prefer actively maintained scrolling libraries. For existing projects using `vue-scroller`, be aware of potential unaddressed bugs or security vulnerabilities and consider migrating to a newer solution in the long term.","message":"The package has not been updated in over four years (as of 2026), indicating it is no longer actively maintained. This means no new features, bug fixes, or security patches will be released.","severity":"gotcha","affected_versions":"All versions"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Ensure `import Vue from 'vue'; import VueScroller from 'vue-scroller'; Vue.use(VueScroller);` runs before `new Vue({...})` to globally register the `<scroller>` component.","cause":"The `Vue.use(VueScroller)` plugin installation was skipped or placed after the Vue instance creation.","error":"[Vue warn]: Unknown custom element: <scroller> - did you register the component correctly?"},{"fix":"Define the `refresh` and `infinite` methods in your Vue component's `methods` object, ensuring they accept `done` as an argument and call `done()` when the operation is complete.","cause":"The `on-refresh` or `on-infinite` callback method is not defined in the Vue component's `methods` option.","error":"TypeError: Cannot read properties of undefined (reading 'refresh')"},{"fix":"Place your scrollable content directly inside the `<scroller>` tags, e.g., `<scroller><div class=\"content\">...</div></scroller>`.","cause":"The `<scroller>` component must have content inside its default slot to enable scrolling.","error":"Error: Scroller requires a child element to scroll."}],"ecosystem":"npm"}