NuxtN
Nuxt•9mo ago•
3 replies
KM

Lenis Nuxt Module `scrollTo` issues

I'm using Lenis' Nuxt module on a site i'm working on but I can't figure out how you're suppose to use the scrollTo method and access the Lenis Instance created by the <VueLenis> component.

I've tried to import and use useLenis but it doesn't seem to do anything?

Here's my Scroller Component:

<script setup>
import { VueLenis } from 'lenis/vue'

const options = ref({
  smooth: true,
  direction: 'vertical',
  gestureDirection: 'vertical',
  smoothTouch: false,
  touchMultiplier: 2,
  infinite: false,
  autoRaf: true,
  lerp: 0.25,
})
</script>

<template>
  <VueLenis ref="scroller" :options="options" root>
    <slot />
  </VueLenis>
</template>



Here's my:

      <UButton
        trailing-icon="i-lucide-arrow-up"
        size="xl"
        variant="outline"
        :ui="{ base: 'rounded-full' }"
        @click="scrollToTop()"
      />



<script setup>

import { useLenis } from 'lenis/vue'

function scrollToTop () {
const lenis = useLenis()
lenis.scrollTo(0, {
  duration: 1,
  easing: (t) => t,
})
}

</script>


Has anyone had any experience with using this before? Some pointers and guidance would be fantastic.
GitHub
lenis/packages/vue/README.md at main · darkroomengineering/lenis
How smooth scroll should be. Contribute to darkroomengineering/lenis development by creating an account on GitHub.
lenis/packages/vue/README.md at main · darkroomengineering/lenis
Was this page helpful?