vue-scrollactive

0.9.3 verified Fri May 01 auth: no javascript

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.

Common errors

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

cause 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);

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

cause 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.

error ReferenceError: Promise is not defined ↓

cause 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>

error Failed to mount component: template or render function not defined ↓

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

fix

Warnings

breaking v0.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.

gotcha The 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.

gotcha Requires 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.

gotcha The 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']").

deprecated Using 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.

Install

npm install vue-scrollactive

yarn add vue-scrollactive

pnpm add vue-scrollactive

Imports

default export

wrong

import { VueScrollactive } from 'vue-scrollactive';

correct

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

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

CommonJS require

wrong

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

correct

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

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

Browser script tag

wrong

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

correct

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

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

Quickstart

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>