Nuxt Lenis

Overview

Nuxt Lenis is an innovative Nuxt wrapper designed to enhance the scrolling experience on your web applications, utilizing the smooth scrolling capabilities of Lenis by Studio Freight. This tool supports multiple instances while providing a type-safe and reactive approach, making it easy to integrate and manage within your Nuxt applications. With the recent version 2 update, the module has been refactored for better usability, enabling developers to manage scroll behaviors in a more organized way.

By using the provided composable (useLenis), developers can easily access instance methods and reactive scroll states. The straightforward setup process allows for quick implementation, and the customizable properties offer flexibility for individual needs.

Features

• Smooth Scrolling: Combines Lenis’s smooth scrolling features with Nuxt’s reactive framework for an enhanced user experience.
• Multiple Instances Support: Easily manage multiple Lenis instances by providing unique IDs, facilitating complex layouts that require distinct scroll behaviors.
• Reactive API: Access a range of methods and properties through the useLenis() composable to dynamically manage scroll state and instance interactions.
• Customizable Properties: Configure various parameters such as duration, autoRaf, and direction to tailor the scrolling behavior to your application's specific requirements.
• OnScroll Callback: Utilize the onScroll prop to handle scroll events seamlessly, promoting better control over scroll interactions without relying solely on emits.
• Centralized Management: Version 2 introduces a central management system for Lenis instances, simplifying the integration process across your pages.
• Clean State Destruction: The ability to destroy instances and clean associated states helps maintain performance without unnecessary overhead.
• Watch Scroll State: Monitors the changes in the scroll state, allowing for reactive updates and interactions based on user scrolling behavior.