nuxt-lenis

Nuxt Lenis

This is a Nuxt wrapper for Lenis by Studio Freight. Thank them for the incredible tool.

Please Note

Because of how Vue/Nuxt useState works, we have to recreate the ScrollState to a new object. We are porting over all fields we find necessary as you can also grab Lenis for all methods and attributes.

Getting Started

• yarn add nuxt-lenis
• Add nuxt-lenis to your modules in nuxt.config
• In your app.vue file, wrap the nuxt page in the lenis component

     <lenis
        :options="LenisOptions"
        @initiated="foo"
        @scroll="fooBar"
     >
        <NuxtPage />
     </lenis>
  

Composable

   <!-- You can pass in true or false into useLenis if you want to use more than one lenis instance. Defaults to single instance (true) -->
   const {scrollState, lenis} = useLenis()

   watch(scrollState, (val) => {
      console.log("scrollState", val);
   },{deep:true});

Multiple Instances

If you have multiple instances of Lenis you can get each one via an ID set ont he Lenis component

   <lenis id="base" >
      <NuxtPage />
   </lenis>
   
   <lenis id="modal" >
      <NuxtPage />
   </lenis>

   <!-- script -->
   const {scrollState, lenis} = useLenis(false)

   scrollState.value.base
   lenis.base
   scrollState.value.modal
   lenis.modal