Smooth Horizontal Scroller Component For Vue – Marquee

Install & Download:

# Yarn
$ yarn add vue3-marquee
# NPM
$ npm i vue3-marquee

Description:

A smooth scroller component for Vue 3, inspired by the traditional <marquee /> element.

How to use it:

1. Install and import the vue-marquee component.

// globally
import { createApp } from "vue";
import Vue3Marquee from "vue3-marquee";
createApp(App).use(Vue3Marquee).mount("#app");
// locally
import Vue3Marquee from "vue3-marquee";
export default {
  components: {
    Vue3Marquee,
  },
};

2. Add content to the scroller.

<vue3-marquee>
  ... Any Content Here ...
</vue3-marquee>

3. Available component props.

vertical: {
  type: Boolean as PropType<MarqueeProps['vertical']>,
  default: false,
},
direction: {
  type: String as PropType<MarqueeProps['direction']>,
  default: 'normal',
},
duration: {
  type: Number as PropType<MarqueeProps['duration']>,
  default: 20,
},
delay: {
  type: Number as PropType<MarqueeProps['delay']>,
  default: 0,
},
loop: {
  type: Number as PropType<MarqueeProps['loop']>,
  default: 0,
},
clone: {
  type: Boolean as PropType<MarqueeProps['clone']>,
  default: false,
},
gradient: {
  type: Boolean as PropType<MarqueeProps['gradient']>,
  default: false,
},
gradientColor: {
  type: Array as PropType<MarqueeProps['gradientColor']>,
  default: [255, 255, 255],
},
gradientWidth: {
  type: String as PropType<MarqueeProps['gradientWidth']>,
},
gradientLength: {
  type: String as PropType<MarqueeProps['gradientLength']>,
},
pauseOnHover: {
  type: Boolean as PropType<MarqueeProps['pauseOnHover']>,
  default: false,
},
pauseOnClick: {
  type: Boolean as PropType<MarqueeProps['pauseOnClick']>,
  default: false,
},
pause: {
  type: Boolean as PropType<MarqueeProps['pause']>,
  default: false,
},

Preview:

Smooth Horizontal Scroller Component For Vue - Marquee

Changelog:

02/18/2024

  • v4.2.0: added support for an animateOnOverflow prop; fixed bugs with the pauseOnHover and pauseOnClick props

09/20/2023

  • v4.1.0: Added Pause Animation Option

06/29/2023

  • v4.0.0

06/23/2023

  • v3.1.3

08/23/2022

  • v3.1.2

03/06/2022

  • bugfix

02/15/2022

  • update

11/20/2021

  • hack fix for html element type

Add Comment