smooth-scrollbar + vue, nuxt and gsap

[cyprianwaclaw]

How to use smooth-scrollbar with nuxt3 and gsap ?

[sadeghbarati]

Hi @cyprianwaclaw

I'm working on Vue & Nuxt

The package is using vue-demi so it's compatible with

• nuxt v2.15.* - nuxt bridge - nuxt v3-rc
• vue v2.6.14 - vue 2.7.* - vue v3.2

But nuxt-module still needs to be done, just for autoImport feature nuxt provides probably add custom preset for unplugin-auto-import
Also it's can be used with gsap and ScrollTrigger

https://nuxt2-15-8-smooth-scrollbar.vercel.app/

I'll include the source code of this demo

[sadeghbarati]

Btw website loading is so slow because of TailwindCSS cdn source code

I'll work on better demo

[cyprianwaclaw]

Hi, thank you so much, could you send me link repo vue-demi ?

[sadeghbarati]

It's in organization private repo, I'll share in public repo as soon as I test Vue 2.7 completely

[sadeghbarati]

https://www.npmjs.com/package/@smooth-scrollbar-contrib/vue-test

Usually this plugin can be used per page or in layouts (app-wide)

you can refer to the source or README on npm for now, three ways to use smooth-scrollbar

1. Component
2. Composable => you can also init Scrollbar on __nuxt element too
3. Directive

use Vue component if you want to use it with ScrollTrigger, component has the mounted emit

• @mounted => ({ target, scrollbarIns}) - also you can use this for register scrollerProxy

Warning: if you are using component to use ScrollTrigger animations you have to use nextTick (wait for all rendering including rendering Scrollbar component) further reading in https://next-blog.site/media/nuxtscrolltrigger/

layouts/default.vue:

<script lang="ts" setup>
import gsap from 'gsap'
import ScrollTrigger from 'gsap/ScrollTrigger'
import SmoothScrollbar from 'smooth-scrollbar';
import OverscrollPlugin from 'smooth-scrollbar/plugins/overscroll'
import { Scrollbar, type ScrollbarOptions, type MountedEmitPayload } from '@smooth-scrollbar-contrib/vue-test'

function mountedFn({target, scrollbarIns}: MountedEmitPayload) {
  ScrollTrigger.scrollerProxy(target.value, {
    scrollTop(value) {
      if (arguments.length) {
        scrollbarIns.scrollTop = value;
      }
      return scrollbarIns.scrollTop;
    }
  });

  scrollbarIns.addListener(ScrollTrigger.update);
  ScrollTrigger.defaults({ scroller: target.value });
}
</script>

<template>
  <Scrollbar @mounted="mountedFn" scrollbar-options="">
    <slot></slot>
  </Scrollbar >
</template>