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 sudden jarring appearences or empty spaces in between content.

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

If you would like to test out any functionality before downloading, you can use codesandbox.io to create a copy of an initialized playground. You can view the sandbox here: https://codesandbox.io/s/vue3-marquee-sandbox-09zm5?file=/src/App.vue

If you are using version 1.x or 2.x of vue3-marquee you should upgrade to version 3.x. You can do this by running the Installation and Usage command below. This adds TS support for the component. There are some new imports so take a look at the new documentation.

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'
import 'vue3-marquee/dist/style.css'

createApp(App).use(Vue3Marquee).mount('#app')

To define global components for Volar type-checking you will need to add:

// components.d.ts
declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    LottieAnimation: typeof import('vue3-marquee')['Vue3Marquee']
  }
}
export {}

If needed rename component to use:

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'
import 'vue3-marquee/dist/style.css'

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'
import 'vue3-marquee/dist/style.css'

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

This is still experimental.

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

This should register as a global component that you can call anywhere in your app under the <Vue3Marquee> tag.

• Import the css file required by the component into your app.vue file.

import 'vue3-marquee/dist/style.css'

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.