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. 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.

View the live demos here: https://vue3-marquee.vercel.app/examples

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 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.

If you are using npm:

npm install vue3-marquee@latest --save

If you are using yarn:

yarn add vue3-marquee@latest

• Register the component in your Vue 3 application.

The most common use case is to register the component globally.

// 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:

app.use(Vue3Marquee, { name: 'MarqueeAnimation' }) // use in template <MarqueeAnimation />

• name string (default: 'Vue3Marquee') - set custom component name

Alternatively you can also import the component locally.

import { Vue3Marquee } from 'vue3-marquee'

export default {
  components: {
    Vue3Marquee,
  },
}

You can then use the component in your template

<template>
  <Vue3Marquee>
    <img height="200" width="300" src="...img" />
    <img height="200" width="300" src="...img" />
    <img height="200" width="300" src="...img" />
  </Vue3Marquee>
</template>

<script>
import { Vue3Marquee } from 'vue3-marquee'

export default {
  components: {
    Vue3Marquee,
  },
}
</script>

If you are using npm:

npm install vue3-marquee@latest --save

If you are using yarn:

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.

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 <Vue3Marquee> tag.

More detailed explanations are provided in the documentation.

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)

• @krishnaguragain - PR #217 - Add the pause prop