⚠️ WARNING
This library will no longer be updated. I recommend using the official version of Lenis Vue instead:
Lenis Vue Official GitHub
Please migrate to the official library for continued updates and support.
nuxt3-lenis provides a <LenisContainer> component that creates a Lenis instance.
For npm users:
npm i nuxt3-lenis
For yarn users:
yarn add nuxt3-lenis
Add the module in nuxt.config
modules: [
"nuxt3-lenis"
],
<template>
<LenisContainer root>
<!-- Content -->
</LenisContainer>
</template>
<script setup>
const lenis = useLenis(({scroll, velocity, progress, direction}) => { ... })
</script>options: Lenis options.root: Lenis will be instanciate using<html>scroll. Default:false.autoRaf: iffalse,lenis.rafneeds to be called manually. Default:true.rafPriority: Tempus execution priority. Default:0.
scroll: Lenis instance.
Once the Lenis context is set (components mounted inside <LenisContainer>) you can use these handy hooks:
useLenis is a hook that returns the Lenis instance
The hook takes three argument:
callback: The function to be called whenever a scroll event is emitteddeps: Trigger callback on changepriority: Manage callback execution order
<template>
<LenisContainer :options="options" root>
<!-- Content -->
</LenisContainer>
</template>
<script setup>
const options = {
duration: 1.2,
easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
orientation: "horizontal",
gestureOrientation: "vertical",
};
</script><template>
<LenisContainer ref="lenisRef" :autoRaf="false" root>
<!-- Content -->
</LenisContainer>
</template>
<script setup>
const lenisRef = ref(null);
const onFrame = (time) => {
lenisRef.value.instance.raf(time * 1000);
};
onMounted(() => {
gsap.ticker.add(onFrame);
});
onBeforeUnmount(() => {
gsap.ticker.remove(onFrame);
});
</script><template>
<LenisContainer @scroll="onScroll" root>
<!-- Content -->
</LenisContainer>
</template>
<script setup>
const onScroll = ({ scroll, velocity, direction, progress }) => {
console.log({ scroll, velocity, direction, progress });
};
</script><template>
<LenisContainer ref="lenisRef" :autoRaf="false" root>
<!-- Content -->
</LenisContainer>
</template>
<script setup>
const lenisRef = ref(null);
const onFrame = (time) => {
lenisRef.value.instance.raf(time);
};
onMounted(() => {
lenisRef.value.instance.on(
"scroll",
({ scroll, velocity, direction, progress }) => {
console.log({ scroll, velocity, direction, progress });
}
);
Tempus.add(onFrame, 0);
});
onBeforeUnmount(() => {
Tempus.remove(onFrame, 0);
});
</script>