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:
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:
Perfect Scrollbar options and events:
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