Nuxt Rellax

Unlock the power of seamless parallax effects in your Nuxt 3 applications with our Rellax module. Explore the documentation to effortlessly integrate this module, offering composable utilities and directives for an enhanced and dynamic web experience. Elevate your website's visual appeal with SEO-friendly parallax scrolling – the perfect blend of performance and aesthetics

• ✨  Release Notes

Features

• Seamless integration with Nuxt 3
• Composable & directives for easy use

Quick Setup

1. Add nuxt-rellax dependency to your project

# Using pnpm
pnpm add -D nuxt-rellax

# Using yarn
yarn add --dev nuxt-rellax

# Using npm
npm install --save-dev nuxt-rellax

2. Add nuxt-rellax to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: ["nuxt-rellax"],
});

That's it! You can now use Nuxt Rellax in your Nuxt app ✨

Usage

Add it to the elements you want to have the parallax effect

Directive usage

You can pass the options directly to the directive:

<DemoBox v-rellax="{ wrapper: '#custom-wrapper' }">
  <p>I have rellax</p>
</DemoBox>

Composable usage

You can pass the selector and the options to the composable

useRellax(".c-rellax", {
  // will apply to all elements
  wrapper: "#custom-wrapper-3",
});

Development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release