Getting Started #

vue3-marquee is a simple marquee component for Vue 3 that creates customizable marquees. This component uses slots for your content and props for any config options.

Introduction #

vue3-marquee was born from an internal need for a quick and easy marquee component that I wanted to use in our website homepage. Many of the component libraries that I found were either unmaintained, complex or not compatible with Vue 3. This component should also work for you if you would like to use a marquee component that just works out of the box and is customizable to fit your use case.

In my search for a good marquee component, I found a React library that seemed to do what I wanted so I decided to emulate the component in Vue 3 for anyone to use. The original React library can be found here.

In vue3-marquee you have the option of cloning content to remove any empty spaces for marquee elements that don't fit the width of the container. This will allow you to have seamless content that just works.

Changes from v2 #

With version 3, native TypeScript support has been added.

Playground #

You can use the already setup code sandbox to play around with the library and test out the funcionality. Use this link to go to the playground.

Installation and Usage #

Vue 3 #

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>

Nuxt 3 #

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'

Available props #

All the possible props for vue3-marquee are shown below.

direction #

The direction for the content to move in. normal corresponds to elements moving left and reverse corresponds to elements moving right.

duration #

The time taken for the marquee content to move the width of its own container (in seconds).

delay #

A delay before the animation starts (in seconds).

loop #

The number of instances that the marquee animation should run (0 is infinite).

gradient #

Whether to show a gradient overlay.

gradientColor #

The RGB colors for the color of the gradient.

gradientWidth #

What portion of the container edges should be taken by the gradient overlay.

pauseOnHover #

Whether to pause the marquee on hover

pauseOnClick #

Whether to pause the marquee when you hold the right click button.

clone - experimental #

Whether to clone the content if you want no empty spaces in the animation. Use this option if you find empty spaces between your marquee animations.

Available events #

vue3-marquee will also emit the following events. Look at the examples provided in the examples section for how to use these methods.

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.