marquee
marquee
A lightweight Nuxt 3 module that harnesses the power of CSS animations to create silky smooth marquees.
Nuxt Marquee
A lightweight Nuxt 3 component that harnesses the power of CSS animations to create silky smooth marquees.
Installation
npx nuxi@latest module add marquee
Usage
To use this module, add it to the modules
section of your nuxt.config.ts
file.
export default defineNuxtConfig({
// ..
modules: ["nuxt-marquee"],
});
Example
<template>
<NuxtMarquee>
<MyComponent />
<MyComponent />
<MyComponent />
</NuxtMarquee>
</template>
Props
Property | Type | Default | Description |
---|---|---|---|
style | CSSProperties | {} | Inline style for the container div |
class | any | "" | Name of the css class to style the container div |
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 slides Warning: Vertical marquees are currently experimental and may be buggy. Please swap the values of the marquee's height and width when setting them |
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 or not |
gradientColor | string | white | The color of the gradient |
gradientWidth | number | string | 200 | The width of the gradient on either side |
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). |