Nuxt Scrollbar

Nuxt wrapper for Vue 3 Perfect Scrollbar

Overview

This is Nuxt 3 wrapper of Vue 3 Perfect Scrollbar (which in turn wraps Perfect Scrollbar).

It's a fairly simple plugin, but takes the hassle out of setting up server and client content, attaching event handlers, and importing styles.

A note about wrapped / alternate packages

Both vue3-perfect-scrollbar and perfect-scrollbar seem to have gone a bit stale, so I figured it was easier to wrap the library for Nuxt 3 in a namespaced package rather hang around for one-day, some-day PRs.

Note that there is also a nuxt-perfect-scrollbar package on NPM, but it's four years old, has no downloads and lacks source code ☠️.

Demo

To view the demo live on StackBlitz:

• https://stackblitz.com/github/davestewart/nuxt-scrollbar?file=playground%2Fapp.vue

To run the demo locally:

npm run dev

Quick Setup

Installation:

npm install --save @davestewart/nuxt-scrollbar

Configuration:

export default defineNuxtConfig({
  modules: [
    '@davestewart/nuxt-scrollbar'
  ],
})

Usage

Markup

Basic example using scrollbar with optional attributes:

<template>
  <NuxtScrollbar tag="aside" @ps-scroll-y="onScroll">
    <!-- your content -->
  </NuxtScrollbar>
</template>

<script setup>
function onScroll (event) {
  console.log(event)
}
</script>

Note:

• you need to set the scrollbar height for it to scroll!
• the scrollbar styles are imported automatically

Options and events

Vue 3 Perfect Scrollbar options:

• https://github.com/mercs600/vue3-perfect-scrollbar#global-options

Perfect Scrollbar options and events:

• https://perfectscrollbar.com

Development

To develop the module:

# develop the module using the demo
npm run dev

# build and release (make sure to update version and changelog first)
npm run release