Vue.js Minimalistic But Powerful Wrapper for Perfect Scrollbar

Vue.js Minimalistic But Powerful Wrapper for Perfect Scrollbar

Vue.js wrapper for perfect scrollbar for version 3

vue3-perfect-scrollbar

Vue.js minimalistic but powerful wrapper for perfect scrollbar

Why I Created it ?

Because I ❤️ to use perfect-scrollbar in my projects ( 🙌 utatti). But also because the current solutions on github are outdated or overcomplicated.

Why would you use it ?

Because you want to load perfect-scrollbar to your Vue project in an easy way. But also because this plugin is updated, tested and build by rollup. So you will not find any unnecessary 💩 code in this repo. I hope 🙏.

If you have any reasonable PR you are welcome 🤘

Install

npm

npm install vue3-perfect-scrollbar

yarn

yarn add vue3-perfect-scrollbar

How to use

Global Registration

import { createApp, h } from 'vue'
import PerfectScrollbar from 'vue3-perfect-scrollbar'
import 'vue3-perfect-scrollbar/dist/vue3-perfect-scrollbar.css'

const app = createApp({
  render: () => h(App)
})

app.use(PerfectScrollbar)

app.mount('#app')

So then you can use this plugin in each component as

<perfect-scrollbar>
    <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</perfect-scrollbar>

This plugin will generate a container with ".ps" class name, you need to customize the height of the container

/* example */
.ps {
  height: 400px;
}

Edit Vue Template

Global options

Install method takes additional parameters:

name {String}

Name of your global component.

Default: PerfectScrollbar

tag {String}

Tag which will be render as perfect scrollbar container

Default: div

watchOptions {Boolean}

Set true if you want to update perfect-scrollbar on options change

Default: false

options {Object}: Options

perfect-scrollbar options.

Default: {}

Local Registration

<template>
    <div>
        <perfect-scrollbar>
            <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
        </perfect-scrollbar>
    </div>
</template>
<script>
import { PerfectScrollbar } from 'vue3-perfect-scrollbar'
export default {
    components: {
        PerfectScrollbar
    }
}
</script>
<style src="vue3-perfect-scrollbar/dist/vue3-perfect-scrollbar.css"/>

Edit Vue Template

Props

tag {String}

Tag which will be render as perfect scrollbar container

Default: div

watchOptions {Boolean}

Set true if you want to update perfect-scrollbar on options change

Default: false

options {Object}: Options

perfect-scrollbar options.

Events

You can use Vue.js way to listen on the all perfect-scrollbar events. List of events you can find here

Simple example:

<template>
  <div id="app">
    <perfect-scrollbar @ps-scroll-y="onScroll" ref="scrollbar">
      <div>your content here</div>
    </perfect-scrollbar>
  </div>
</template>

<script>
export default {
  methods: {
    onScroll(event) {
      console.log(this.$refs.scrollbar.ps, event);
    }
  }
};
</script>

Edit Vue Perfect Scrollbar Event Listening

DEMO

https://mercs600.github.io/vue3-perfect-scrollbar/. You can also fork example from codesandbox

Cookbook

Custom scrollbar behavior with router.

One of simple solution to setup custom scrollbar to top when your route is changed.

  1. Add perfect scrollbar as wrapper for router-view and add simple ref
<perfect-scrollbar ref="scroll">
  <router-view></router-view>
</perfect-scrollbar>
  1. Add watch on $route to setup scroll container to 0, when route is changed.
watch: {
  $route() {
    this.$refs.scroll.$el.scrollTop = 0;
  }
}

Edit vue3-perfect-scrollbar with router

Download Details:

Author: mercs600

Source Code: https://github.com/mercs600/vue3-perfect-scrollbar

vue vuejs javascript

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Vue Native is a framework to build cross platform native mobile apps using JavaScript

Vue Native is a framework to build cross platform native mobile apps using JavaScript. It is a wrapper around the APIs of React Native. So, with Vue Native, you can do everything that you can do with React Native. With Vue Native, you get

How to Make a Simple Vue Custom Select Component

In this article, you’ll learn how to build a Vue custom select component that can be easily be styled using your own CSS. In fact, it’s the same component that we use in production on Qvault, and you can see it in action on the playground.

Creating a Custom Tooltip Component in Vue

There are plenty of libraries out there that will have you up and running with a good tooltip solution in minutes. However, if you are like me, you are sick and tired of giant dependency trees that have the distinct possibility of breaking at any time.

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.