{"library":"overlayscrollbars-vue","title":"OverlayScrollbars for Vue","description":"OverlayScrollbars-Vue is the official Vue wrapper for the OverlayScrollbars library, providing highly customizable scrollbars that replace native browser scrollbars for consistent cross-browser styling and behavior. It integrates seamlessly into Vue 3 applications, offering both a component-based API (`OverlayScrollbarsComponent`) and a composable API for more granular control. Currently at version `0.5.9`, the package maintains an active release cadence, often aligning with updates to the underlying `OverlayScrollbars` core library, which is at `v2.15.0`. Recent core library updates have introduced features like configurable click-scroll behavior and performance optimizations such as a `sleep` function and enhanced debounce options. Its key differentiators include extensive customization options, performance optimizations like deferred initialization, and robust event handling, making it a powerful choice for enhancing UI/UX in Vue projects demanding bespoke scrollbar aesthetics and functionality.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install overlayscrollbars-vue"],"cli":null},"imports":["import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue';","import 'overlayscrollbars/overlayscrollbars.css';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { defineComponent } from 'vue';\nimport { OverlayScrollbarsComponent } from 'overlayscrollbars-vue';\nimport 'overlayscrollbars/overlayscrollbars.css';\n\nexport default defineComponent({\n  components: { OverlayScrollbarsComponent },\n  data() {\n    return {\n      content: Array.from({ length: 50 }, (_, i) => `Item ${i + 1}`).join('<br>')\n    };\n  },\n  methods: {\n    onScroll(instance, event) {\n      console.log('Scroll event!', event, instance.state().scrollOffset);\n    },\n    onInitialized(instance) {\n      console.log('OverlayScrollbars initialized:', instance);\n    }\n  },\n  template: `\n    <div style=\"width: 300px; height: 200px; border: 1px solid #ccc;\">\n      <h3>Scrollable Content</h3>\n      <OverlayScrollbarsComponent\n        element=\"div\"\n        :options=\"{ scrollbars: { autoHide: 'scroll', autoHideDelay: 200 } }\"\n        :events=\"{ scroll: onScroll, initialized: onInitialized }\"\n        defer\n        style=\"height: 100%;\"\n      >\n        <div v-html=\"content\"></div>\n      </OverlayScrollbarsComponent>\n    </div>\n  `\n});","lang":"typescript","description":"Initializes a custom scrollbar for a content area in a Vue component, demonstrating basic component usage with options, event handling, and deferred initialization for performance.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}