# vue3-marquee
> A simple marquee component with ZERO dependencies for Vue 3
Latest version **4.3.0** (published 2026-11-03) · MIT license · 0 weekly downloads
## Install
```sh
npm install vue3-marquee
pnpm add vue3-marquee
yarn add vue3-marquee
bun add vue3-marquee
```
## Health
**Score 65/100 (B)** — status: active.
Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.
Warnings: low downloads.
## Facts
| | |
|---|---|
| Version | 4.3.0 |
| Published | 2026-11-03 |
| First published | 2021-10-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=14.16 |
| Dependencies | 0 |
| Unpacked size | 48.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 778 |
| Author | Sanjay Soundarajan |
| Maintainers | megasanjay |
| Keywords | vue3, marquee |
## Links
- npm: https://www.npmjs.com/package/vue3-marquee
- Repository: https://github.com/megasanjay/vue3-marquee
- Homepage: https://vue3-marquee.vercel.app/
- Issues: https://github.com/megasanjay/vue3-marquee/issues
- npm.io page: https://npm.io/package/vue3-marquee
## Recent versions
- 4.3.0 (latest) — 2026-11-03
- 4.2.0-beta.0 (beta) — 2024-01-18
- 4.2.2 — 2024-09-02
- 4.2.1 — 2024-08-02
- 4.2.0 — 2024-02-18
- 4.2.0-beta.1 — 2024-01-18
- 4.1.0 — 2023-09-20
- 4.0.0 — 2023-06-29
- 4.0.0-beta.0 — 2023-06-29
- 3.2.1 — 2023-06-23
- 3.2.0 — 2023-06-23
- 3.1.3 — 2023-06-22
- 3.1.2 — 2022-08-23
- 3.1.1 — 2022-08-23
- 3.1.0 — 2022-08-23
- … 27 more at https://npm.io/package/vue3-marquee/versions
## README
# vue3-marquee
[](https://www.npmjs.com/package/vue3-marquee) [](https://www.npmjs.com/package/vue3-marquee) [](https://github.com/megasanjay/vue3-marquee/stargazers) [](https://github.com/megasanjay/vue3-marquee/blob/main/LICENSE) [](https://github.com/megasanjay/vue3-marquee/issues)
A simple marquee component with ZERO dependencies for Vue 3. This component was originally developed for internal use but I figured this could be useful to someone else as well. This component is modeled after a React marquee component I found called [React Fast Marquee](https://github.com/justin-chu/react-fast-marquee). To keep a smooth animation running, clones of the content can be created for seamless transitions with no flickering or empty spaces in between content.
## Demos
View the live demos here: [https://vue3-marquee.vercel.app/examples](https://vue3-marquee.vercel.app/examples)
## Upgrade to v4.x
If you are using version 3.x of `vue3-marquee` you should upgrade to version 4.x. You can do this by running the [Installation and Usage](#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](https://vue3-marquee.vercel.app/introduction/v4) for instructions on how to migrate to this package.
## Installation and Usage
### 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
```
- 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
```
### Nuxt 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](https://vue3-marquee.vercel.app/api/props).
| 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 |
| pauseOnReducedMotion | Boolean | true | Whether to pause the marquee when the user prefers reduced motion |
| 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](#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, or when keyboard focus enters or leaves the marquee. It will notify if the animation pauses.
- onResume
- This event is emitted if you have either `pauseOnHover` or `pauseOnClick` enabled, or when keyboard focus enters or leaves the marquee. 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](https://github.com/krishnaguragain) - PR [#217](https://github.com/megasanjay/vue3-marquee/pull/217) - Add the `pause` prop
- [@adampanger](https://github.com/adampanger) - PR [#345](https://github.com/megasanjay/vue3-marquee/pull/345) - Fix for `animateOnOverflowOnly` emit events
[](https://forthebadge.com) [](https://forthebadge.com)
---
_Source: https://npm.io/package/vue3-marquee · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._