How to Install 🔖

NPM

npm

npm install vue-drag-scroller

yarn

yarn add vue-drag-scroller

pnpm

pnpm add vue-drag-scroller

CDN

You can also include Vue Drag Scroller via CDN by adding the following script tag to your HTML file:

<script src="https://unpkg.com/vue-drag-scroller/dist/vue-drag-scroller.es.js"></script>

Import

Install to Vue 3

• To use Vue Drag Scroller global in your Vue 3 application, import it as a plugin in your main.js file:

main.js

import { createApp } from 'vue'
import App from './App.vue'
import VueDragScroller from 'vue-drag-scroller'

const app = createApp(App)
app.use(VueDragScroller)
app.mount('#app')

App.vue

<template>
	<div v-drag-scroller>
	</div>
</template>

• To use Vue Drag Scroller locally in your Vue 3 application, import it as a component in your single file component:

App.vue

<script>
    import { dragScroller as vDragScroller } from  "vue-drag-scroller"
</script>

<template>
    <div v-drag-scroller>
    </div>
</template>

Install to Nuxt.js (Only for Nuxt 3)

To use Vue Drag Scroller in your Nuxt.js application, import it as a plugin in your nuxt.config.js file:

plugins/vue-drag-scroller.js

import VueDragScroller from 'vue-drag-scroller'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueDragScroller)
})

nuxt.config.js

export default defineNuxtConfig({
  plugins: ['~/plugins/vue-drag-scroller.ts'],
})

App.vue

<template>
  <div v-drag-scroller>
  </div>
</template>