Make your components scroll on mouse drag in Nuxt js

Umesh Thapa
2 min readJun 30, 2022

I have multiple column tables and hard to scroll and get the exact data. And then finally I got a package vue-dragscroll and solved the problem.

vue-dragscroll is a micro vue.js directive that enables scrolling via holding the mouse button (“drag and drop” or “click and hold” style).

Nuxt js

npm install vue-dragscroll

Create a plugin

import Vue from 'vue';import VueDragscroll from 'vue-dragscroll';Vue.use(VueDragscroll);
Vue.component('VueDragscroll', VueDragscroll);

Add plugin into nuxt.config.js

plugins: [  {src: '~/plugins/drag-scroll', ssr:   false  }],

Now use it anywhere in your application.

<div v-dragscroll>// scrollable data</div>

Vue 2

npm install vue-dragscroll

Install globally (main.js)

import Vue from 'vue'import VueDragscroll from 'vue-dragscroll'Vue.use(VueDragscroll)(Or) Install for a single componentimport { dragscroll } from 'vue-dragscroll'export default {  directives: {  dragscroll  }}


npm install vue-dragscroll

Install globally (main.js)

import { createApp } from 'vue'import { dragscrollNext } from "vue-dragscroll";import App from './App.vue'
const app = createApp(App);app.directive('dragscroll', dragscrollNext);app.mount('#app')

Just add the directive to the parent element

<div v-dragscroll> ... <div>   <!-- For more control --><div v-dragscroll="true"> ... <div>

Read official documentation here.

A directive with nochilddrag argument

<div v-dragscroll:nochilddrag> ... <div>

This will only enable drag-scrolling for an element itself, but not for its children. Check this example



Umesh Thapa

Web Design || Development || Content Creator || Editor || Writer || Ewumesh || Nepal || Australia || USA #ewumesh