Vue.js Wrapper For Perfect Scrollbar

Install & Download:

# Vue 3
$ npm i vue3-perfect-scrollbar
# Vue 2
$ npm i vue2-perfect-scrollbar

Description:

Vue 3 and Vue 2 wrapper for the perfect scrollbar plugin.

How to use it:

1. Import and register the vue-perfect-scrollbar.

// Vue 2
import PerfectScrollbar from 'vue2-perfect-scrollbar'
import 'vue2-perfect-scrollbar/dist/vue2-perfect-scrollbar.css'
Vue.use(PerfectScrollbar)
// Vue 3
import { createApp } from 'vue'
import App from './App.vue'
import PerfectScrollbar from 'vue3-perfect-scrollbar'
import 'vue3-perfect-scrollbar/dist/vue3-perfect-scrollbar.css'
const app = createApp(App)
app.use(PerfectScrollbar)
app.mount('#app')

2. Add the perfect-scrollbar component to the app.

<perfect-scrollbar>
  ... scrollable content ...
</perfect-scrollbar>

3. Set the height of the scrollable container.

.ps {
  height: 300px;
}

4. Available props.

options: {
  // perfect-scrollbar options
  type: Object,
  required: false,
  default: () => {}
},
tag: {
  type: String,
  required: false,
  default: 'div'
},
watchOptions: {
  // uses perfect-scrollbar options
  type: Boolean,
  required: false,
  default: false
}