Nuxt module

Animate your vue components on scroll with HumbleScroll in just a few steps.

Installation

1. Add humblescroll-nuxt dependency to your project:

npm install -D humblescroll-nuxt

yarn add -D humblescroll-nuxt

pnpm add -D humblescroll-nuxt

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

// nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    'humblescroll-nuxt'
  ]
})

3. Import the TailwindCSS plugin in your tailwind.config.js file:

// tailwind.config.js

import { humbleScrollTailwindPlugin } from 'humblescroll-vue'

export default {
  content: [],
  theme: {},
  plugins: [
    humbleScrollTailwindPlugin
  ]
}

4. Use the HumbleScroll component:

<script setup lang="ts">
// HumbleScroll is automatically imported
</script>

<template>
  <HumbleScroll animation="fade up">
    <h1 class="text-4xl font-bold">HumbleScroll</h1>
  </HumbleScroll>
</template>

Options

You can customize the plugins behavior by using the humbleScroll option in your nuxt.config.ts file:

// nuxt.config.js
export default defineNuxtConfig({
  modules: [
    'humblescroll-nuxt'
  ],
  humbleScroll: {
    // Options go here
  }
})

See the options section for more details.