Make your components scroll on mouse drag in Nuxt js

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 component
import { dragscroll } from 'vue-dragscroll'
export default {
  directives: {
  dragscroll
  }
}

VUE 3

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