Add a Good Looking Scrollbar to our App with the vue-perfect-scrollbar Library

Photo by --> paypal.me/ninekoepfer on Unsplash

The vue-perfect-scrollbar library lets us add a scrollbar easily into our Vue app.

In this article, we’ll look at how to add a scroll bar to our Vue app with it.

Installation

We can install the library by running:

npm install vue-perfect-scrollbar

Adding the Scrollbar

We can add a scrollbar with the library by writing:

<template>
  <div id="app">
    <VuePerfectScrollbar
      style="height: 300px"
      class="scroll-area"
      v-once
      :settings="settings"
      @ps-scroll-y="scrollHandle"
    >
      <p v-for="n in 100" :key="n">{{n}}</p>
    </VuePerfectScrollbar>
  </div>
</template>
<script>
import VuePerfectScrollbar from "vue-perfect-scrollbar";
export default {
  name: "App",
  components: {
    VuePerfectScrollbar
  },
  data() {
    return {
      settings: {
        maxScrollbarLength: 60
      }
    };
  },
  methods: {
    scrollHandle(evt) {
      console.log(evt);
    }
  }
};
</script>

We add the VuePerfectScrollbar component to our Vue app after we registered it.