A simple marquee component with ZERO dependencies for Vue 3
npm install vue3-marqueevue3-marquee you should upgrade to version 4.x. You can do this by running the Installation and Usage command below. This add better support for Typescript. There is also a change with the dist/style.css import (it's been removed) so take a look at the new documentation for instructions on how to migrate to this package.
shell
npm install vue3-marquee@latest --save
`
If you are using yarn:
`shell
yarn add vue3-marquee@latest
`
- Register the component in your Vue 3 application.
The most common use case is to register the component globally.
`js
// main.js
import { createApp } from 'vue'
import Vue3Marquee from 'vue3-marquee'
createApp(App).use(Vue3Marquee).mount('#app')
`
If you need to use a custom component name, you can pass it as an option to the plugin:
`ts
app.use(Vue3Marquee, { name: 'MarqueeAnimation' }) // use in template
`
- name string (default: 'Vue3Marquee') - set custom component name
Alternatively you can also import the component locally.
`js
import { Vue3Marquee } from 'vue3-marquee'
export default {
components: {
Vue3Marquee,
},
}
`
You can then use the component in your template
`vue
`
$3
If you are using npm:
`shell
npm install vue3-marquee@latest --save
`
If you are using yarn:
`shell
yarn add vue3-marquee@latest
`
- Create a folder called plugins at the root of your project.
- Create a file named Vue3Marquee.client.ts inside the _plugins_ directory.
- Add the following code to the Vue3Marquee.client.ts file.
`ts
import Vue3Marquee from 'vue3-marquee'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(Vue3Marquee, { name: 'Vue3Marquee' })
})
`
This should register as a global component that you can call anywhere in your app under the tag.
Props and options
More detailed explanations are provided in the documentation.
| Prop | Type | Default Value | Description |
| --------------------- | -------------------------------------- | --------------- | -------------------------------------------------------------------------------------- |
| direction | String of either 'normal' or 'reverse' | "normal" | The direction for the content to move in |
| duration | Number | 20 | The time taken for the marquee content to move the width of the container (in seconds) |
| delay | Number | 0 | A delay before the animation starts (in seconds) |
| loop | Number | 0 | The number of instances that the marquee animation should run (0 is infinite) |
| gradient | Boolean | false | Whether to show a gradient overlay |
| gradientColor | Array of 3 RGB values | [255, 255, 255] | The RGB colors for the color of the gradient |
| gradientLength | String | 200px | Length of portion of the container edges that should be taken by the gradient overlay |
| pause | Boolean | false | A reactive prop to pause the marquee |
| pauseOnHover | Boolean | false | Whether to pause the marquee on hover |
| pauseOnClick | Boolean | false | Whether to pause the marquee when you hold the right click button |
| clone | Boolean | false | Whether to clone the content if you want no empty spaces in the animation |
| vertical | Boolean | false | Whether to make the marquee vertical |
| animateOnOverflowOnly | Boolean | false | Whether to animate the marquee if the content overflows the container |
Events
A few events are emitted from the component. Look at the Demos for examples.
- onComplete
- If your marquee has a finite amount of loops you can use this event to know when the animation has completed.
- onLoopComplete
- You can use this event to know when your marquee has completed a loop.
- onPause
- This event is emitted if you have either pauseOnHover or pauseOnClick enabled. It will notify if the animation pauses.
- onResume
- This event is emitted if you have either pauseOnHover or pauseOnClick enabled. It will notify if the animation resumes.
- onOverflowDetected
- This event is emitted if you have animateOnOverflowOnly enabled. It will notify if the content overflows the container.
- onOverflowCleared
- This event is emitted if you have animateOnOverflowOnly enabled. It will notify if the content no longer overflows the container. (useful if you need to add a class to the container when the content overflows)
Credits
- @krishnaguragain - PR #217 - Add the pause prop
- @adampanger - PR #345 - Fix for animateOnOverflowOnly` emit events