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
}

Preview:

Vue.js Wrapper For Perfect Scrollbar

Changelog:

v2.0.0 (03/30/2024)

  • Removed the watchOptions property; it is now always watched.
  • Removed default options in the case of global registration.

v1.5.56 (12/03/2022)

  • Updated dependency

v1.5.0 (12/29/2019)

  • Avoid potential issues during update cycle
  • Add options to toggle watching on options

Add Comment