useLocomotive

This composable adds Locomotive Scroll to Vue while keeping it SSR friendly.

WARNING

This will not inject the basic styles that lenis (which is used in Locomotive Scroll). If you want to use it, wrap the root of your app in <Locomotive />.

INFO

If you need this on the entire page, you need to do this

Usage

First install locomotive-scroll:

npm

npm i -D locomotive-scroll@beta

yarn

yarn add -D locomotive-scroll@beta

pnpm

pnpm i -D locomotive-scroll@beta

bun

bun i -D locomotive-scroll@beta

Now you can use it by calling useLocomotive!

Example

useLocomotive();
// running it like this will register it globally

Component

You have lenis styles added in this as well.

Example

<locomotive>
  <!-- where you want smooth scroll -->
</locomotive>

On the entire page

If you need the wrapper to be the HTML element, you'll need to do this:

<locomotive :options="{ lenisOptions: { wrapper: undefined } }">
  <!-- where you want smooth scroll -->
</locomotive>

This will remove having the main div in the component being the wrapper and default it to the window. This will remove any unnecessary behavior.