{"id":12582,"library":"vue-smooth-scroll","title":"Vue Smooth Scroll Directive","description":"The `vue-smooth-scroll` package provides a lightweight, declarative smooth scrolling directive for Vue.js applications. It enables animated scrolling to anchor links within a page with customizable duration and offset. Currently at version 1.0.13, this library appears to be in a stable state with an infrequent release cadence, primarily targeting Vue 2 environments. Its key differentiators include a minimal footprint (under 1KB gzipped), straightforward integration through a global Vue directive, and a focus on simplicity rather than advanced features like scroll spy or complex easing functions. It serves as a practical solution for projects needing basic, reliable scroll-to-anchor functionality without the overhead of more extensive scrolling solutions. The project builds upon the foundations of the `vue-smoothscroll` library, aiming for ease of use and maintenance.","status":"active","version":"1.0.13","language":"javascript","source_language":"en","source_url":"https://github.com/alamcordeiro/vue-smooth-scroll","tags":["javascript"],"install":[{"cmd":"npm install vue-smooth-scroll","lang":"bash","label":"npm"},{"cmd":"yarn add vue-smooth-scroll","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-smooth-scroll","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required runtime dependency for Vue directives.","package":"vue","optional":false}],"imports":[{"note":"The package exports a default module; CommonJS users must access the `.default` property if using `require`.","wrong":"const vueSmoothScroll = require('vue-smooth-scroll');","symbol":"vueSmoothScroll","correct":"import vueSmoothScroll from 'vue-smooth-scroll';"},{"note":"The library is intended for global registration via `Vue.use()` for Vue 2 applications. It exposes a plugin interface.","wrong":"app.directive('smooth-scroll', vueSmoothScroll);","symbol":"Vue.use","correct":"Vue.use(vueSmoothScroll);"},{"note":"This is a directive; it must be prefixed with `v-` in templates. Options are passed as an object literal.","wrong":"Jump","symbol":"v-smooth-scroll","correct":"Jump"}],"quickstart":{"code":"import { createApp } from 'vue'; // For illustration, assuming a Vue 2 project or compatibility layer\nimport vueSmoothScroll from 'vue-smooth-scroll';\n\n// In a typical Vue 2 setup:\n// import Vue from 'vue';\n// Vue.use(vueSmoothScroll);\n\n// For modern setups (e.g., Vue 3 with a compatibility layer or if plugin adapts):\nconst app = createApp({\n template: `\n
\n

Vue Smooth Scroll Example

\n \n
\n

Section 1

\n

Content for section 1.

\n
\n
\n

Section 2

\n

Content for section 2 with a custom offset and duration.

\n
\n
\n `,\n});\n\n// This line is crucial for registering the plugin in Vue 2.\n// For Vue 3, a different registration might be needed if not fully compatible.\napp.use(vueSmoothScroll);\n\napp.mount('#app');\n","lang":"javascript","description":"This quickstart demonstrates how to install, import, and globally register `vue-smooth-scroll` as a Vue plugin. It shows basic usage of the `v-smooth-scroll` directive with and without custom options, enabling smooth scrolling to anchor tags within a single-page application."},"warnings":[{"fix":"For Vue 3 projects, investigate if a Vue 3 compatible fork or an alternative smooth scroll library is available. If using Vue 2, ensure `Vue` is globally available or imported correctly before calling `Vue.use()`.","message":"This package is primarily designed for Vue 2. It uses `Vue.use()` for global plugin registration, which is a Vue 2 API. Direct compatibility with Vue 3 is not guaranteed without a compatibility layer (e.g., `@vue/compat`) or a separate Vue 3 specific version.","severity":"breaking","affected_versions":"All versions"},{"fix":"For specific usage or better tree-shaking, consider manually registering the directive on a component basis or using a local directive definition if the library allows it (though this plugin is designed for global use). Alternatively, accept the global registration for simplicity given the library's small size.","message":"The global registration via `Vue.use(vueSmoothScroll)` applies the directive to all Vue instances. In large applications, this can make tree-shaking less effective if the directive is only used in a few places.","severity":"gotcha","affected_versions":"All versions"},{"fix":"Ensure that `v-smooth-scroll` is not applied to elements where router links or other custom navigation logic is already handling the click event. Test thoroughly to avoid unexpected navigation or scrolling behavior.","message":"The directive works by intercepting clicks on anchor (``) tags and overriding their default behavior. If you have custom click handlers or are using a Vue Router `` with `href` attributes, this directive might conflict.","severity":"gotcha","affected_versions":"All versions"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `import vueSmoothScroll from 'vue-smooth-scroll'; Vue.use(vueSmoothScroll);` is called before your Vue application mounts.","cause":"The `v-smooth-scroll` directive was used in a template but the plugin was not correctly registered with Vue.","error":"[Vue warn]: Failed to resolve directive: smooth-scroll"},{"fix":"Make sure Vue itself is imported and globally available (e.g., `import Vue from 'vue';` or via a script tag) before attempting to use `Vue.use()`.","cause":"The global `Vue` object is not defined or is not accessible when `Vue.use(vueSmoothScroll)` is called.","error":"Uncaught TypeError: Cannot read properties of undefined (reading 'use')"}],"ecosystem":"npm"}