N
Nuxt•6d ago
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>
<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()"
      />
      <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>
<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.
2 Replies
kapa.ai
kapa.ai•6d ago
Hi @KM. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm sorry, but the knowledge sources provided do not contain explicit documentation or examples for using the Lenis Nuxt module's scrollTo method or how to access the Lenis instance created by the <VueLenis> component in a Nuxt 3 context. While there are references to using Lenis and GSAP ScrollTrigger together in Nuxt projects, those examples do not cover the specifics of the Lenis Nuxt module, nor do they demonstrate the use of useLenis or scrollTo in a Nuxt 3 setup. The sources also do not clarify how the Lenis instance is exposed or accessed when using the <VueLenis> component in a composable or component context. If you need further guidance, I recommend checking the official Lenis Vue documentation or opening an issue on the Lenis repository for more targeted support. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•6d ago
<@302508239461941250> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?