{"id":12465,"library":"vue-dragscroll","title":"Vue Dragscroll Directive","description":"vue-dragscroll is a lightweight Vue.js directive designed to enable scrolling of an HTML element via a drag-and-drop or click-and-hold mouse interaction. The current stable version, 4.0.6, is specifically built for Vue 3 projects and leverages modern tooling such as TypeScript and Vite. This package offers a simple, declarative way to implement interactive scrolling without needing complex configurations, distinguishing itself as a focused directive rather than a comprehensive scrolling utility. It provides an intuitive user experience for horizontally or vertically scrollable containers. Release cadence has historically been tied to major Vue version compatibility, with key updates like adding Vue 3 support and migrating to a TypeScript codebase.","status":"active","version":"4.0.6","language":"javascript","source_language":"en","source_url":"https://github.com/donmbelembe/vue-dragscroll","tags":["javascript","vue","scroll","drag","typescript"],"install":[{"cmd":"npm install vue-dragscroll","lang":"bash","label":"npm"},{"cmd":"yarn add vue-dragscroll","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-dragscroll","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"As a Vue directive, it requires Vue 3 as a peer dependency for versions 3.x and 4.x.","package":"vue","optional":false}],"imports":[{"note":"Since v4.0.2, the package is built with Vite and primarily targets ESM environments, making CommonJS 'require' syntax incompatible for modern Vue 3 projects.","wrong":"const dragscroll = require('vue-dragscroll');","symbol":"dragscroll","correct":"import { dragscroll } from 'vue-dragscroll';"},{"note":"The directive must be globally registered with `app.directive()` before use in components. The `dragscroll` symbol is a named export.","wrong":"app.directive('dragscroll', require('vue-dragscroll').default);","symbol":"Directive registration","correct":"import { createApp } from 'vue';\nimport { dragscroll } from 'vue-dragscroll';\n\nconst app = createApp(App);\napp.directive('dragscroll', dragscroll);"},{"note":"The library ships with TypeScript types, allowing for type-checking of directive options or the directive instance itself, although direct configuration types are not frequently exposed.","symbol":"Type import","correct":"import type { DragscrollOptions } from 'vue-dragscroll';"}],"quickstart":{"code":"import { createApp } from 'vue';\nimport { dragscroll } from 'vue-dragscroll';\n\nconst app = createApp({\n  template: `\n    <div v-dragscroll class=\"scrollable-container\">\n      <div v-for=\"n in 10\" :key=\"n\" class=\"scroll-item\">\n        Item {{ n }}\n      </div>\n    </div>\n  `,\n  setup() {\n    // Component logic here if needed\n  }\n});\n\napp.directive('dragscroll', dragscroll);\napp.mount('#app');\n\n// Basic styling for demonstration purposes\nconst style = document.createElement('style');\nstyle.innerHTML = `\n.scrollable-container {\n  width: 400px;\n  height: 150px;\n  overflow-x: scroll;\n  overflow-y: hidden; /* Prevent vertical scrolling */\n  white-space: nowrap;\n  border: 1px solid #ccc;\n  cursor: grab;\n  user-select: none;\n  padding: 10px;\n}\n.scrollable-container:active {\n  cursor: grabbing;\n}\n.scroll-item {\n  display: inline-block;\n  width: 120px;\n  height: 100%;\n  background-color: #f0f0f0;\n  margin-right: 10px;\n  line-height: 130px;\n  text-align: center;\n  border: 1px dashed #aaa;\n  vertical-align: middle;\n}\n`;\ndocument.head.appendChild(style);","lang":"typescript","description":"This example demonstrates how to globally register the `dragscroll` directive and apply it to a scrollable `div` in a Vue 3 application. It creates a simple horizontal scroll container populated with items that can be scrolled by dragging with the mouse."},"warnings":[{"fix":"Upgrade to Vue 3 or pin `vue-dragscroll` to a version compatible with Vue 2 (e.g., <3.0.0).","message":"Version 4.0.2 explicitly dropped support for Vue 2. Applications using `vue-dragscroll` with Vue 2 should remain on versions prior to 3.0.0 or migrate their entire application to Vue 3.","severity":"breaking","affected_versions":">=4.0.2"},{"fix":"Ensure your project is running Vue 3 when using `vue-dragscroll` v3.x or v4.x. For Vue 2 projects, use `vue-dragscroll` versions <3.0.0.","message":"Version 3.0.0 introduced support for Vue 3. While a necessary upgrade for Vue 3 projects, it implies breaking changes for existing Vue 2 projects attempting to upgrade `vue-dragscroll` without also migrating Vue itself.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Always use ES module import syntax (`import { dragscroll } from 'vue-dragscroll';`) when consuming the package in Vue 3 projects.","message":"With the migration to TypeScript and Vite in v4.0.2, `vue-dragscroll` primarily targets ESM (ECMAScript Modules) environments. Attempting to use CommonJS `require()` syntax may lead to import errors or incorrect module resolution in modern Vue 3 setups.","severity":"breaking","affected_versions":">=4.0.2"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure you have globally registered the directive using `app.directive('dragscroll', dragscroll);` after importing `dragscroll`.","cause":"The `dragscroll` directive has not been properly registered with the Vue application instance.","error":"Failed to resolve directive: dragscroll"},{"fix":"Use the correct ES module named import: `import { dragscroll } from 'vue-dragscroll';`.","cause":"This typically occurs when attempting to use CommonJS `require()` syntax (`const dragscroll = require('vue-dragscroll');`) in a modern Vue 3 project that expects ESM, or when trying to access a non-existent default export.","error":"TypeError: Cannot read properties of undefined (reading 'directive') OR dragscroll is not a function"},{"fix":"Run `npm install vue-dragscroll` or `yarn add vue-dragscroll` to install the package. Double-check the import statement for typos.","cause":"The package is not installed, or there's a typo in the import path.","error":"Module not found: Error: Can't resolve 'vue-dragscroll'"}],"ecosystem":"npm"}