nuxt-marquee

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

Events

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>

License

MIT - Made with 💙 by Hànzy