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,
},