Registry / web-framework / vue-scrollactive

vue-scrollactive

library0.9.3jsnpmunverified

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.

web-framework

npm install vue-scrollactive

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-SCROLLACTIVE

vue-scrollactive

web-frameworkjavascriptv0.9.3

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default export

✓ import VueScrollactive from 'vue-scrollactive'; Vue.use(VueScrollactive);

✗ import { VueScrollactive } from 'vue-scrollactive';

The package exports a default object that must be installed via Vue.use(). Named import does not work.

CommonJS require

✓ const VueScrollactive = require('vue-scrollactive'); Vue.use(VueScrollactive);

✗ const { VueScrollactive } = require('vue-scrollactive');

In CJS, the default export is accessed via require without destructuring.

Browser script tag

✓ <script src="path/to/vue-scrollactive.min.js"></script> // VueScrollactive is available as window.VueScrollactive Vue.use(VueScrollactive);

✗ <script src="vue-scrollactive.min.js"></script> // No import needed, but must call Vue.use

The UMD build attaches to window.VueScrollactive; you must still call Vue.use().

Shows how to install, register the plugin, and use the scrollactive component with anchor-based menu items.

// Install: npm install vue-scrollactive import Vue from 'vue'; import VueScrollactive from 'vue-scrollactive'; Vue.use(VueScrollactive); // In your template: // <scrollactive active-class="active" :offset="80" :duration="800" bezier-easing-value=".5,0,.35,1"> // <a href="#home" class="scrollactive-item">Home</a> // <a href="#about" class="scrollactive-item">About</a> // <a href="#contact" class="scrollactive-item">Contact</a> // </scrollactive> // // Sections: // <section id="home">...</section> // <section id="about">...</section> // <section id="contact">...</section>

Debug

Known issues

breakingv0.9.0 may have breaking changes from earlier versions – check props and event signatures.

fix

Review the changelog for v0.9.0; update props like offset, duration, or bezier-easing-value if needed.

affects: ^0.9.0

gotchaThe component only works with Vue 2.x. It is not compatible with Vue 3.

fix

If using Vue 3, consider alternatives like vue-scrollto or vue3-scroll-spy.

affects: >=0.0.0

gotchaRequires a Promise polyfill for older browsers (e.g., IE11). The library itself uses promises.

fix

Install a polyfill like promise-polyfill: npm install promise-polyfill and include it before vue-scrollactive.

affects: >=0.0.0

gotchaThe scrollactive-item class must be added exactly as a CSS class on the menu items; the component will not work otherwise.

fix

Ensure each menu item has class="scrollactive-item" (or :class="['scrollactive-item']").

affects: >=0.0.0

deprecatedUsing href-based selectors is the primary method; data-section-selector is an alternative but may be less commonly used.

fix

Prefer href attribute with valid ID selectors unless you need CSS selector flexibility.

affects: >=0.9.2

Errors

Common errors & fixes

[Vue warn]: Unknown custom element: <scrollactive> - did you register the component correctly?

Missing Vue.use(VueScrollactive) or incorrectly importing the default export.

fix

Ensure you call Vue.use(VueScrollactive) after importing the package: import VueScrollactive from 'vue-scrollactive'; Vue.use(VueScrollactive);

Uncaught TypeError: Cannot read properties of undefined (reading 'use')

Importing VueScrollactive without having Vue installed or the import order is wrong.

fix

Make sure Vue is imported before VueScrollactive. Example: import Vue from 'vue' first.

ReferenceError: Promise is not defined

Browser does not support Promise (e.g., IE11) and no polyfill is included.

fix

Add a Promise polyfill before loading vue-scrollactive: <script src="https://cdn.jsdelivr.net/npm/promise-polyfill/dist/polyfill.min.js"></script>

Failed to mount component: template or render function not defined

Using the component without registering it via Vue.use(), or using a non-standard build (e.g., ES module without proper bundler).

fix

Register the plugin with Vue.use(VueScrollactive) and ensure your build tool handles the package correctly.

Upgrade

Version history

0.9.3latest on npm

Audit

Dependencies

vueoptionalPeer dependency, works with Vue 2.x

Agent activity

13 hits · last 30 days

node

Amazon

OpenAI (training)

Resources

githubhttps://github.com/eddiemf/vue-scrollactive ↗

packagehttps://www.npmjs.com/package/vue-scrollactive ↗