{"id":12542,"library":"vue-perfect-scrollbar","title":"Vue Perfect Scrollbar (Vue 2)","description":"vue-perfect-scrollbar is a Vue.js 2 wrapper component for the Perfect Scrollbar library, designed to provide custom, cross-browser scrollbars that mimic native scrolling behavior but offer enhanced styling capabilities. The current version, 0.2.1, was last published 7 years ago, indicating that this specific package is abandoned and no longer actively maintained. While it aimed to simplify the integration of perfect-scrollbar into Vue 2 applications, users looking for modern Vue compatibility (Vue 3) or ongoing maintenance should seek alternative, actively developed wrappers like `vue3-perfect-scrollbar`. This package does not have a regular release cadence due to its abandoned status.","status":"abandoned","version":"0.2.1","language":"javascript","source_language":"en","source_url":"https://github.com/Degfy/vue-perfect-scrollbar","tags":["javascript","scroll","scrollbar","perfect-scroll","vue-perfect-scroll","vue-scroll","vue-scrollbar","vue-plugin","frontend"],"install":[{"cmd":"npm install vue-perfect-scrollbar","lang":"bash","label":"npm"},{"cmd":"yarn add vue-perfect-scrollbar","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-perfect-scrollbar","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core scrollbar functionality; vue-perfect-scrollbar is a wrapper around it.","package":"perfect-scrollbar","optional":false},{"reason":"Build dependency for examples, not a runtime dependency for the component itself. Needed for SASS styling within Vue projects.","package":"sass-loader","optional":true},{"reason":"Build dependency for examples, not a runtime dependency for the component itself. Needed for SASS styling within Vue projects.","package":"node-sass","optional":true}],"imports":[{"note":"Standard ES Module import for a Vue component. Ensure Vue is configured to handle .vue file imports. This package is for Vue 2.","wrong":"const VuePerfectScrollbar = require('vue-perfect-scrollbar')","symbol":"VuePerfectScrollbar","correct":"import VuePerfectScrollbar from 'vue-perfect-scrollbar'"},{"note":"Some older Webpack or specific build configurations might require importing the .vue file directly. The default export is the component.","wrong":"import { VuePerfectScrollbar } from 'vue-perfect-scrollbar'","symbol":"VuePerfectScrollbar (Webpack/Older Bundlers)","correct":"import VuePerfectScrollbar from 'vue-perfect-scrollbar/index.vue'"},{"note":"The core `perfect-scrollbar` CSS needs to be imported separately. This package does not bundle or re-export the styles.","wrong":"import 'vue-perfect-scrollbar/dist/perfect-scrollbar.css'","symbol":"CSS Styles","correct":"import 'perfect-scrollbar/css/perfect-scrollbar.css'"}],"quickstart":{"code":"<template>\n  <VuePerfectScrollbar class=\"scroll-area\" :settings=\"settings\" @ps-scroll-y=\"scrollHandle\">\n    <div style=\"height: 1000px; width: 100%; background: #f0f0f0; padding: 20px;\">\n      <h1>Scrollable Content</h1>\n      <p>This is some long content to demonstrate the scrollbar functionality.</p>\n      <p>Scroll down to see more...</p>\n      <p v-for=\"n in 50\" :key=\"n\">Line {{ n }} of many.</p>\n    </div>\n  </VuePerfectScrollbar>\n</template>\n\n<script>\nimport VuePerfectScrollbar from 'vue-perfect-scrollbar'\nimport 'perfect-scrollbar/css/perfect-scrollbar.css' // Don't forget to import the CSS\n\nexport default {\n  components: {\n    VuePerfectScrollbar\n  },\n  name: 'App',\n  data() {\n    return {\n      settings: {\n        maxScrollbarLength: 60,\n        wheelSpeed: 0.5\n      }\n    }\n  },\n  methods: {\n    scrollHandle(evt) {\n      console.log('Scroll Y event:', evt)\n    },\n    // Example of manually updating the scrollbar\n    updateScrollbar() {\n      if (this.$refs.scrollbar) {\n        // Assuming you add a ref='scrollbar' to VuePerfectScrollbar component\n        // this.$refs.scrollbar.$children[0].update(); // Accessing underlying PerfectScrollbar instance\n        console.warn('Manual update method might vary based on the Perfect Scrollbar version and wrapper implementation.')\n      }\n    }\n  },\n  mounted() {\n    // Simulate content change after a delay to show update necessity\n    // setTimeout(() => {\n    //   // Add more content dynamically\n    //   // this.$nextTick(() => this.updateScrollbar());\n    // }, 2000);\n  }\n}\n</script>\n<style lang=\"scss\">\n.scroll-area {\n  position: relative; /* Crucial for perfect-scrollbar to work correctly */\n  margin: auto;\n  width: 400px;\n  height: 300px;\n  border: 1px solid #ccc;\n}\n</style>","lang":"javascript","description":"This quickstart demonstrates how to integrate `vue-perfect-scrollbar` into a Vue 2 application, showing component registration, prop binding for settings, event handling, and essential CSS for correct rendering. It includes a scrollable content area to visualize the custom scrollbar."},"warnings":[{"fix":"For Vue 3 projects, consider using actively maintained alternatives like `vue3-perfect-scrollbar`. For Vue 2, proceed with caution, acknowledging the lack of updates.","message":"This `vue-perfect-scrollbar` package is abandoned and has not been updated in over 7 years. It is designed for Vue 2 and is incompatible with Vue 3. Using it in modern Vue projects will lead to significant compatibility issues and a lack of ongoing support or security patches.","severity":"breaking","affected_versions":">=0.2.1"},{"fix":"Ensure you `npm install perfect-scrollbar` and `import 'perfect-scrollbar/css/perfect-scrollbar.css'` in your main application file or component styles.","message":"The underlying `perfect-scrollbar` library and its CSS must be installed and imported separately. This wrapper component does not bundle the core perfect-scrollbar styles, leading to non-functional scrollbars if the CSS is missing.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Add `position: relative;` to the CSS class of the element wrapping `vue-perfect-scrollbar`, as shown in the quickstart example (e.g., `.scroll-area { position: relative; }`).","message":"For `perfect-scrollbar` to function correctly, the container element on which `vue-perfect-scrollbar` is applied (or its direct parent) must have `position: relative` CSS property. Failing to set this will result in scrollbars not appearing or behaving erratically.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Always use version 0.0.14 or newer. Review any manual calls to `init()` or `uninit()` methods if upgrading from very old versions.","message":"Older versions (prior to 0.0.14) had 'wrong method names for init and uninit', which could cause issues with programmatic control or component lifecycle management. While fixed, this indicates potential instability in early releases.","severity":"deprecated","affected_versions":"<0.0.14"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `import VuePerfectScrollbar from 'vue-perfect-scrollbar'` is present in your script, and the component is registered in `components: { VuePerfectScrollbar }` within your Vue component definition.","cause":"The VuePerfectScrollbar component was not correctly registered with Vue, or there's a typo in the component name.","error":"[Vue warn]: Unknown custom element: <VuePerfectScrollbar>"},{"fix":"1. Add `import 'perfect-scrollbar/css/perfect-scrollbar.css'` to your project. 2. Ensure the CSS for the scrollable area includes `position: relative;`.","cause":"Missing `perfect-scrollbar` CSS import or the container element does not have `position: relative`.","error":"Scrollbars are not visible or do not function correctly."},{"fix":"After content changes that affect scrollable size, you may need to manually trigger an update on the Perfect Scrollbar instance. This typically involves accessing the underlying Perfect Scrollbar instance via a Vue ref and calling its `update()` method, though the exact access path can vary (e.g., `this.$refs.myScrollbar.$children[0].update()`).","cause":"Perfect Scrollbar often requires manual `update()` calls when its content or container dimensions change, and this wrapper might not automatically detect all changes.","error":"VuePerfectScrollbar does not update after content changes (e.g., new items added to a list)."}],"ecosystem":"npm"}