Nuxt Marquee

A lightweight Nuxt module that harnesses the power of CSS animations to create silky smooth marquees. Powered by vue-fast-marquee.

🎮 Interactive Playground / Demo

📌 Upgrading to v2.x: Vertical marquees now use native CSS column layouts (no manual width/height swapping needed). This release also adds interactive drag scrubbing (draggable), programmatic playback methods (play, pause, reset, etc.), and dark mode gradient support (gradientColorDark).

🚀 What's New in v2.x

• 🖱️ Drag-to-Scrub: Set draggable to allow users to drag or swipe to scrub through marquee content.
• 🎮 Imperative Controls: Access component playback methods (play(), pause(), toggle(), reset()) and state via template refs.
• 🌙 Dark Mode Gradient: Added gradientColorDark for dark mode gradient masks (activates when .dark class is present).
• 📐 Native Vertical Marquee: Vertical directions (up / down) now render natively with CSS flex column layout and vertical gradients.
• ⚡ Smooth Playback: Improved hover and click pause handling to work seamlessly alongside drag scrubbing.

Installation

npx nuxi@latest module add marquee

Example

<template>
    <NuxtMarquee>
        <MyComponent />
        <MyComponent />
        <MyComponent />
    </NuxtMarquee>
</template>

Props

| Property | Type | Default | Description | | :------------------ | :------------------------------------ | :--------------- | :---------------------------------------------------------------------------------------------------------------------------- | | autoFill | boolean | false | Whether to automatically fill blank space in the marquee with copies of the children or not | | play | boolean | true | Whether to play or pause the marquee | | pauseOnHover | boolean | false | Whether to pause the marquee when hovered | | pauseOnClick | boolean | false | Whether to pause the marquee when clicked | | direction | "left" \| "right" \| "up" \| "down" | "left" | The direction the marquee is sliding | | speed | number | 50 | Speed calculated as pixels/second | | delay | number | 0 | Duration to delay the animation after render, in seconds | | loop | number | 0 | The number of times the marquee should loop, 0 is equivalent to infinite | | gradient | boolean | false | Whether to show the gradient mask on the edges or not | | gradientColor | string | "white" | The color of the gradient mask | | gradientColorDark | string | gradientColor | The color of the gradient mask in dark mode (activates when .dark class is present). Defaults to gradientColor if not set | | gradientWidth | number \| string | 200 | The width/height of the gradient on either side (in pixels or CSS unit string) | | draggable | boolean | false | Enable manual dragging/swiping with pointer/touch to scrub through the marquee |

Events

| Event Name | Description | | :-------------- | :----------------------------------------------------------------------------------------------------------- | | finish | Emitted when the marquee finishes scrolling and stops. Only calls if loop is non-zero. | | cycleComplete | Emitted when the marquee finishes a loop. Does not call if maximum loops are reached (use onFinish instead). |

Component Methods

Access methods programmatically using a Vue template ref:

<script setup lang="ts">
import { NuxtMarquee } from '#components';

const marqueeRef = ref<InstanceType<typeof NuxtMarquee>>();
</script>

<template>
    <NuxtMarquee ref="marqueeRef">...</NuxtMarquee>
    <button @click="marqueeRef?.pause()">Pause</button>
    <button @click="marqueeRef?.reset()">Reset</button>
</template>

| Method / Property | Type | Description | | :---------------- | :--------------------- | :-------------------------------------------- | | play() | () => void | Starts or resumes the animation | | pause() | () => void | Pauses the animation | | toggle() | () => void | Toggles between play and pause | | reset() | () => void | Resets animation time to 0 and starts playing | | isPlaying | ComputedRef<boolean> | Whether the animation is currently playing | | isPaused | ComputedRef<boolean> | Whether the animation is currently paused |

License

MIT - Made with 💙 by Hànzy