{"id":26620,"library":"vue-scrollactive","title":"vue-scrollactive","description":"A lightweight Vue component for scroll-based menu highlighting and smooth scrolling to sections. Current stable version is 0.9.3, released on npm. It automatically adds an 'active' class to menu items as corresponding sections come into view, and scrolls to the target section on click. Key differentiators: supports both href-based and custom data attribute selectors, configurable easing and offset, emits itemchanged events, and allows dynamic menu items. Compared to alternatives like vue-scrollspy or vue-scrollto, this component combines scrollspy and scroll-to behavior in one package with a simple plugin API. Works with Vue 2 only (no Vue 3 support). Dependencies: requires Promise polyfill for older browsers.","status":"active","version":"0.9.3","language":"javascript","source_language":"en","source_url":"https://github.com/eddiemf/vue-scrollactive","tags":["javascript","vue","vue-plugin","vue-component","scrollspy","scroll","active","active-class","menu-item"],"install":[{"cmd":"npm install vue-scrollactive","lang":"bash","label":"npm"},{"cmd":"yarn add vue-scrollactive","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-scrollactive","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency, works with Vue 2.x","package":"vue","optional":true}],"imports":[{"note":"The package exports a default object that must be installed via Vue.use(). Named import does not work.","wrong":"import { VueScrollactive } from 'vue-scrollactive';","symbol":"default export","correct":"import VueScrollactive from 'vue-scrollactive'; Vue.use(VueScrollactive);"},{"note":"In CJS, the default export is accessed via require without destructuring.","wrong":"const { VueScrollactive } = require('vue-scrollactive');","symbol":"CommonJS require","correct":"const VueScrollactive = require('vue-scrollactive'); Vue.use(VueScrollactive);"},{"note":"The UMD build attaches to window.VueScrollactive; you must still call Vue.use().","wrong":"<script src=\"vue-scrollactive.min.js\"></script>\n// No import needed, but must call Vue.use","symbol":"Browser script tag","correct":"<script src=\"path/to/vue-scrollactive.min.js\"></script>\n// VueScrollactive is available as window.VueScrollactive\nVue.use(VueScrollactive);"}],"quickstart":{"code":"// Install: npm install vue-scrollactive\n\nimport Vue from 'vue';\nimport VueScrollactive from 'vue-scrollactive';\n\nVue.use(VueScrollactive);\n\n// In your template:\n// <scrollactive active-class=\"active\" :offset=\"80\" :duration=\"800\" bezier-easing-value=\".5,0,.35,1\">\n//   <a href=\"#home\" class=\"scrollactive-item\">Home</a>\n//   <a href=\"#about\" class=\"scrollactive-item\">About</a>\n//   <a href=\"#contact\" class=\"scrollactive-item\">Contact</a>\n// </scrollactive>\n//\n// Sections:\n// <section id=\"home\">...</section>\n// <section id=\"about\">...</section>\n// <section id=\"contact\">...</section>","lang":"javascript","description":"Shows how to install, register the plugin, and use the scrollactive component with anchor-based menu items."},"warnings":[{"fix":"Review the changelog for v0.9.0; update props like offset, duration, or bezier-easing-value if needed.","message":"v0.9.0 may have breaking changes from earlier versions – check props and event signatures.","severity":"breaking","affected_versions":"^0.9.0"},{"fix":"If using Vue 3, consider alternatives like vue-scrollto or vue3-scroll-spy.","message":"The component only works with Vue 2.x. It is not compatible with Vue 3.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Install a polyfill like promise-polyfill: npm install promise-polyfill and include it before vue-scrollactive.","message":"Requires a Promise polyfill for older browsers (e.g., IE11). The library itself uses promises.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Ensure each menu item has class=\"scrollactive-item\" (or :class=\"['scrollactive-item']\").","message":"The scrollactive-item class must be added exactly as a CSS class on the menu items; the component will not work otherwise.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Prefer href attribute with valid ID selectors unless you need CSS selector flexibility.","message":"Using href-based selectors is the primary method; data-section-selector is an alternative but may be less commonly used.","severity":"deprecated","affected_versions":">=0.9.2"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Ensure you call Vue.use(VueScrollactive) after importing the package: import VueScrollactive from 'vue-scrollactive'; Vue.use(VueScrollactive);","cause":"Missing Vue.use(VueScrollactive) or incorrectly importing the default export.","error":"[Vue warn]: Unknown custom element: <scrollactive> - did you register the component correctly?"},{"fix":"Make sure Vue is imported before VueScrollactive. Example: import Vue from 'vue' first.","cause":"Importing VueScrollactive without having Vue installed or the import order is wrong.","error":"Uncaught TypeError: Cannot read properties of undefined (reading 'use')"},{"fix":"Add a Promise polyfill before loading vue-scrollactive: <script src=\"https://cdn.jsdelivr.net/npm/promise-polyfill/dist/polyfill.min.js\"></script>","cause":"Browser does not support Promise (e.g., IE11) and no polyfill is included.","error":"ReferenceError: Promise is not defined"},{"fix":"Register the plugin with Vue.use(VueScrollactive) and ensure your build tool handles the package correctly.","cause":"Using the component without registering it via Vue.use(), or using a non-standard build (e.g., ES module without proper bundler).","error":"Failed to mount component: template or render function not defined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}