@davestewart/nuxt-scrollbar
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

Nuxt Scrollbar

Nuxt wrapper for Vue 3 Perfect Scrollbar

npm version npm downloads License Nuxt

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

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
1.0.0358latest

Version History

VersionDownloads (Last 7 Days)Published
1.0.0358
0.1.20
0.1.10

Package Sidebar

Install

npm i @davestewart/nuxt-scrollbar

Weekly Downloads

358

Version

1.0.0

License

MIT

Unpacked Size

8.3 kB

Total Files

11

Last publish

Collaborators

  • davestewart