Vue Marquee

A beautiful marquee component for Vue 3 with TypeScript support, smooth animations, and full customization.

Selemondev

Senior Frontend Engineer

Marquee Library has been a game-changer for our TypeScript projects. Its seamless integration and robust features have significantly improved our UI's dynamic capabilities.

Raj Patel

Tech Lead

I'm thoroughly impressed with Marquee's performance and ease of use. It made implementing complex scrolling texts a breeze, and the support for TypeScript is top-notch.

Sofia Garcia

UI/UX Designer

As a designer, I appreciate how Marquee enhances the visual appeal of our applications. The flexibility it offers in styling and animation is fantastic.

John Mack

Full Stack Developer

Integrating Marquee into our full-stack TypeScript projects has been incredibly efficient. Its compatibility and ease of customization are ideal for our diverse project needs.

Isabella Smith

Project Manager

Marquee Library has consistently delivered beyond our expectations. It's not just a tool; it's an asset that enhances productivity and creativity in our TypeScript applications.

Selemondev

Senior Frontend Engineer

Marquee Library has been a game-changer for our TypeScript projects. Its seamless integration and robust features have significantly improved our UI's dynamic capabilities.

Raj Patel

Tech Lead

I'm thoroughly impressed with Marquee's performance and ease of use. It made implementing complex scrolling texts a breeze, and the support for TypeScript is top-notch.

Sofia Garcia

UI/UX Designer

As a designer, I appreciate how Marquee enhances the visual appeal of our applications. The flexibility it offers in styling and animation is fantastic.

John Mack

Full Stack Developer

Integrating Marquee into our full-stack TypeScript projects has been incredibly efficient. Its compatibility and ease of customization are ideal for our diverse project needs.

Isabella Smith

Project Manager

Marquee Library has consistently delivered beyond our expectations. It's not just a tool; it's an asset that enhances productivity and creativity in our TypeScript applications.

Selemondev

Senior Frontend Engineer

Marquee Library has been a game-changer for our TypeScript projects. Its seamless integration and robust features have significantly improved our UI's dynamic capabilities.

Raj Patel

Tech Lead

I'm thoroughly impressed with Marquee's performance and ease of use. It made implementing complex scrolling texts a breeze, and the support for TypeScript is top-notch.

Sofia Garcia

UI/UX Designer

As a designer, I appreciate how Marquee enhances the visual appeal of our applications. The flexibility it offers in styling and animation is fantastic.

John Mack

Full Stack Developer

Integrating Marquee into our full-stack TypeScript projects has been incredibly efficient. Its compatibility and ease of customization are ideal for our diverse project needs.

Isabella Smith

Project Manager

Marquee Library has consistently delivered beyond our expectations. It's not just a tool; it's an asset that enhances productivity and creativity in our TypeScript applications.

Selemondev

Senior Frontend Engineer

Marquee Library has been a game-changer for our TypeScript projects. Its seamless integration and robust features have significantly improved our UI's dynamic capabilities.

Raj Patel

Tech Lead

I'm thoroughly impressed with Marquee's performance and ease of use. It made implementing complex scrolling texts a breeze, and the support for TypeScript is top-notch.

Sofia Garcia

UI/UX Designer

As a designer, I appreciate how Marquee enhances the visual appeal of our applications. The flexibility it offers in styling and animation is fantastic.

John Mack

Full Stack Developer

Integrating Marquee into our full-stack TypeScript projects has been incredibly efficient. Its compatibility and ease of customization are ideal for our diverse project needs.

Isabella Smith

Project Manager

Marquee Library has consistently delivered beyond our expectations. It's not just a tool; it's an asset that enhances productivity and creativity in our TypeScript applications.

Installation

npm install @selemondev/vue3-marquee

Register as a Global Component

import { Marquee } from "@selemondev/vue3-marquee";
import "@selemondev/vue3-marquee/style.css"
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App);
app.component('Marquee', Marquee)
app.mount('#app')

Register as a Local Component

import { Marquee } from "@selemondev/vue3-marquee";
import "@selemondev/vue3-marquee/style.css"

Nuxt 3 Integration

If you are using Nuxt 3, you can register it as a Nuxt plugin as shown below:

// ~/plugins/marquee.ts

import { Marquee } from "@selemondev/vue3-marquee";
import "@selemondev/vue3-marquee/style.css"
export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.component('Marquee', Marquee)
})

Fade Effect

Selemondev

Senior Frontend Engineer

Marquee Library has been a game-changer for our TypeScript projects. Its seamless integration and robust features have significantly improved our UI's dynamic capabilities.

Raj Patel

Tech Lead

I'm thoroughly impressed with Marquee's performance and ease of use. It made implementing complex scrolling texts a breeze, and the support for TypeScript is top-notch.

Sofia Garcia

UI/UX Designer

As a designer, I appreciate how Marquee enhances the visual appeal of our applications. The flexibility it offers in styling and animation is fantastic.

John Mack

Full Stack Developer

Integrating Marquee into our full-stack TypeScript projects has been incredibly efficient. Its compatibility and ease of customization are ideal for our diverse project needs.

Isabella Smith

Project Manager

Marquee Library has consistently delivered beyond our expectations. It's not just a tool; it's an asset that enhances productivity and creativity in our TypeScript applications.

Selemondev

Senior Frontend Engineer

Marquee Library has been a game-changer for our TypeScript projects. Its seamless integration and robust features have significantly improved our UI's dynamic capabilities.

Raj Patel

Tech Lead

I'm thoroughly impressed with Marquee's performance and ease of use. It made implementing complex scrolling texts a breeze, and the support for TypeScript is top-notch.

Sofia Garcia

UI/UX Designer

As a designer, I appreciate how Marquee enhances the visual appeal of our applications. The flexibility it offers in styling and animation is fantastic.

John Mack

Full Stack Developer

Integrating Marquee into our full-stack TypeScript projects has been incredibly efficient. Its compatibility and ease of customization are ideal for our diverse project needs.

Isabella Smith

Project Manager

Marquee Library has consistently delivered beyond our expectations. It's not just a tool; it's an asset that enhances productivity and creativity in our TypeScript applications.

<Marquee :fade="true">
  <div>Content 1</div>
  <div>Content 2</div>
  <div>Content 3</div>
</Marquee>

Reverse Direction

Selemondev

Senior Frontend Engineer

Marquee Library has been a game-changer for our TypeScript projects. Its seamless integration and robust features have significantly improved our UI's dynamic capabilities.

Raj Patel

Tech Lead

I'm thoroughly impressed with Marquee's performance and ease of use. It made implementing complex scrolling texts a breeze, and the support for TypeScript is top-notch.

Sofia Garcia

UI/UX Designer

As a designer, I appreciate how Marquee enhances the visual appeal of our applications. The flexibility it offers in styling and animation is fantastic.

John Mack

Full Stack Developer

Integrating Marquee into our full-stack TypeScript projects has been incredibly efficient. Its compatibility and ease of customization are ideal for our diverse project needs.

Isabella Smith

Project Manager

Marquee Library has consistently delivered beyond our expectations. It's not just a tool; it's an asset that enhances productivity and creativity in our TypeScript applications.

Selemondev

Senior Frontend Engineer

Marquee Library has been a game-changer for our TypeScript projects. Its seamless integration and robust features have significantly improved our UI's dynamic capabilities.

Raj Patel

Tech Lead

I'm thoroughly impressed with Marquee's performance and ease of use. It made implementing complex scrolling texts a breeze, and the support for TypeScript is top-notch.

Sofia Garcia

UI/UX Designer

As a designer, I appreciate how Marquee enhances the visual appeal of our applications. The flexibility it offers in styling and animation is fantastic.

John Mack

Full Stack Developer

Integrating Marquee into our full-stack TypeScript projects has been incredibly efficient. Its compatibility and ease of customization are ideal for our diverse project needs.

Isabella Smith

Project Manager

Marquee Library has consistently delivered beyond our expectations. It's not just a tool; it's an asset that enhances productivity and creativity in our TypeScript applications.

<Marquee :reverse="true" :fade="true">
  <div>Content 1</div>
  <div>Content 2</div>
  <div>Content 3</div>
</Marquee>

Pause On Hover

Selemondev

Senior Frontend Engineer

Marquee Library has been a game-changer for our TypeScript projects. Its seamless integration and robust features have significantly improved our UI's dynamic capabilities.

Raj Patel

Tech Lead

I'm thoroughly impressed with Marquee's performance and ease of use. It made implementing complex scrolling texts a breeze, and the support for TypeScript is top-notch.

Sofia Garcia

UI/UX Designer

As a designer, I appreciate how Marquee enhances the visual appeal of our applications. The flexibility it offers in styling and animation is fantastic.

John Mack

Full Stack Developer

Integrating Marquee into our full-stack TypeScript projects has been incredibly efficient. Its compatibility and ease of customization are ideal for our diverse project needs.

Isabella Smith

Project Manager

Marquee Library has consistently delivered beyond our expectations. It's not just a tool; it's an asset that enhances productivity and creativity in our TypeScript applications.

Selemondev

Senior Frontend Engineer

Marquee Library has been a game-changer for our TypeScript projects. Its seamless integration and robust features have significantly improved our UI's dynamic capabilities.

Raj Patel

Tech Lead

I'm thoroughly impressed with Marquee's performance and ease of use. It made implementing complex scrolling texts a breeze, and the support for TypeScript is top-notch.

Sofia Garcia

UI/UX Designer

As a designer, I appreciate how Marquee enhances the visual appeal of our applications. The flexibility it offers in styling and animation is fantastic.

John Mack

Full Stack Developer

Integrating Marquee into our full-stack TypeScript projects has been incredibly efficient. Its compatibility and ease of customization are ideal for our diverse project needs.

Isabella Smith

Project Manager

Marquee Library has consistently delivered beyond our expectations. It's not just a tool; it's an asset that enhances productivity and creativity in our TypeScript applications.

<Marquee :pauseOnHover="true" :fade="true">
  <div>Content 1</div>
  <div>Content 2</div>
  <div>Content 3</div>
</Marquee>

Vertical Marquee

Selemondev

Senior Frontend Engineer

Marquee Library has been a game-changer for our TypeScript projects. Its seamless integration and robust features have significantly improved our UI's dynamic capabilities.

Raj Patel

Tech Lead

I'm thoroughly impressed with Marquee's performance and ease of use. It made implementing complex scrolling texts a breeze, and the support for TypeScript is top-notch.

Sofia Garcia

UI/UX Designer

As a designer, I appreciate how Marquee enhances the visual appeal of our applications. The flexibility it offers in styling and animation is fantastic.

John Mack

Full Stack Developer

Integrating Marquee into our full-stack TypeScript projects has been incredibly efficient. Its compatibility and ease of customization are ideal for our diverse project needs.

Isabella Smith

Project Manager

Marquee Library has consistently delivered beyond our expectations. It's not just a tool; it's an asset that enhances productivity and creativity in our TypeScript applications.

Selemondev

Senior Frontend Engineer

Marquee Library has been a game-changer for our TypeScript projects. Its seamless integration and robust features have significantly improved our UI's dynamic capabilities.

Raj Patel

Tech Lead

I'm thoroughly impressed with Marquee's performance and ease of use. It made implementing complex scrolling texts a breeze, and the support for TypeScript is top-notch.

Sofia Garcia

UI/UX Designer

As a designer, I appreciate how Marquee enhances the visual appeal of our applications. The flexibility it offers in styling and animation is fantastic.

John Mack

Full Stack Developer

Integrating Marquee into our full-stack TypeScript projects has been incredibly efficient. Its compatibility and ease of customization are ideal for our diverse project needs.

Isabella Smith

Project Manager

Marquee Library has consistently delivered beyond our expectations. It's not just a tool; it's an asset that enhances productivity and creativity in our TypeScript applications.

<Marquee class="h-100" direction="up" :fade="true">
  <div>Content 1</div>
  <div>Content 2</div>
  <div>Content 3</div>
</Marquee>

Custom Gap And Speed

Selemondev

Senior Frontend Engineer

Marquee Library has been a game-changer for our TypeScript projects. Its seamless integration and robust features have significantly improved our UI's dynamic capabilities.

Raj Patel

Tech Lead

I'm thoroughly impressed with Marquee's performance and ease of use. It made implementing complex scrolling texts a breeze, and the support for TypeScript is top-notch.

Sofia Garcia

UI/UX Designer

As a designer, I appreciate how Marquee enhances the visual appeal of our applications. The flexibility it offers in styling and animation is fantastic.

John Mack

Full Stack Developer

Integrating Marquee into our full-stack TypeScript projects has been incredibly efficient. Its compatibility and ease of customization are ideal for our diverse project needs.

Isabella Smith

Project Manager

Marquee Library has consistently delivered beyond our expectations. It's not just a tool; it's an asset that enhances productivity and creativity in our TypeScript applications.

Selemondev

Senior Frontend Engineer

Marquee Library has been a game-changer for our TypeScript projects. Its seamless integration and robust features have significantly improved our UI's dynamic capabilities.

Raj Patel

Tech Lead

I'm thoroughly impressed with Marquee's performance and ease of use. It made implementing complex scrolling texts a breeze, and the support for TypeScript is top-notch.

Sofia Garcia

UI/UX Designer

As a designer, I appreciate how Marquee enhances the visual appeal of our applications. The flexibility it offers in styling and animation is fantastic.

John Mack

Full Stack Developer

Integrating Marquee into our full-stack TypeScript projects has been incredibly efficient. Its compatibility and ease of customization are ideal for our diverse project needs.

Isabella Smith

Project Manager

Marquee Library has consistently delivered beyond our expectations. It's not just a tool; it's an asset that enhances productivity and creativity in our TypeScript applications.

<Marquee class="gap-12 [--duration:5s] [--gap:3rem]" innerClassName="gap-[3rem]" :fade="true">
  <div>Content 1</div>
  <div>Content 2</div>
  <div>Content 3</div>
</Marquee>

Reduced Motion Support

Disable animation when the user's device prefers reduced motion for improved accessibility.

Selemondev

Senior Frontend Engineer

Marquee Library has been a game-changer for our TypeScript projects. Its seamless integration and robust features have significantly improved our UI's dynamic capabilities.

Raj Patel

Tech Lead

I'm thoroughly impressed with Marquee's performance and ease of use. It made implementing complex scrolling texts a breeze, and the support for TypeScript is top-notch.

Sofia Garcia

UI/UX Designer

As a designer, I appreciate how Marquee enhances the visual appeal of our applications. The flexibility it offers in styling and animation is fantastic.

John Mack

Full Stack Developer

Integrating Marquee into our full-stack TypeScript projects has been incredibly efficient. Its compatibility and ease of customization are ideal for our diverse project needs.

Isabella Smith

Project Manager

Marquee Library has consistently delivered beyond our expectations. It's not just a tool; it's an asset that enhances productivity and creativity in our TypeScript applications.

Selemondev

Senior Frontend Engineer

Marquee Library has been a game-changer for our TypeScript projects. Its seamless integration and robust features have significantly improved our UI's dynamic capabilities.

Raj Patel

Tech Lead

I'm thoroughly impressed with Marquee's performance and ease of use. It made implementing complex scrolling texts a breeze, and the support for TypeScript is top-notch.

Sofia Garcia

UI/UX Designer

As a designer, I appreciate how Marquee enhances the visual appeal of our applications. The flexibility it offers in styling and animation is fantastic.

John Mack

Full Stack Developer

Integrating Marquee into our full-stack TypeScript projects has been incredibly efficient. Its compatibility and ease of customization are ideal for our diverse project needs.

Isabella Smith

Project Manager

Marquee Library has consistently delivered beyond our expectations. It's not just a tool; it's an asset that enhances productivity and creativity in our TypeScript applications.

<Marquee class="py-4 motion-reduce:overflow-auto" innerClassName="motion-reduce:animate-none motion-reduce:first:hidden">
  <div>Content 1</div>
  <div>Content 2</div>
  <div>Content 3</div>
</Marquee>