Add Marquee in Vue

March 28, 2025 · AI Conversations

User

add morqueu in vuew

Assistant

It looks like you're asking how to add a **marquee effect** in a **Vue.js** application (like scrolling text or images horizontally). Here's how you can do it:

—

### ✅ Option 1: Use a Simple CSS Animation (No library)

**1. Component template:**

<template>
  <div class="marquee-wrapper">
    <div class="marquee">
      <span>🚀 Welcome to our website! Stay tuned for updates! 🎉</span>
    </div>
  </div>
</template>

**2. Add CSS styles:**

<style scoped>
.marquee-wrapper {
  overflow: hidden;
  white-space: nowrap;
}

.marquee {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 10s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}
</style>

—

### ✅ Option 2: Use a Vue Marquee Library (if you want more features)

You can install a package like [`vue-marquee`](https://www.npmjs.com/package/vue-marquee) or [`vue3-marquee`](https://www.npmjs.com/package/vue3-marquee) for Vue 3:

**Install:**

yarn add vue3-marquee
# or
npm install vue3-marquee

**Usage:**

<template>
  <vue3-marquee>
    <p>This is a marquee scrolling text component in Vue 3! 🎉</p>
  </vue3-marquee>
</template>

<script setup>
import Vue3Marquee from 'vue3-marquee'
</script>

**Don't forget to import CSS if needed:**

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

—

Would you like the marquee to scroll horizontally, vertically, or have images inside too? I can tailor it to your use case.

User

in vutify 3

Assistant

Nice — if you're using **Vuetify 3** with **Vue 3**, you can create a **marquee-style scrolling effect** using Vuetify's layout components along with CSS.

Vuetify 3 doesn’t have a built-in “ component, but you can combine Vuetify's `v-container`, `v-row`, and `v-col` with some custom CSS animation.

—

### ✅ Example: Scrolling Marquee in Vuetify 3

<template>
  <v-container class="overflow-hidden" fluid>
    <div class="marquee">
      <div class="marquee-content">
        <span v-for="n in 10" :key="n">🚀 Vuetify 3 Marquee — Smooth Scroll ✨</span>
      </div>
    </div>
  </v-container>
</template>

<style scoped>
.marquee {
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}

.marquee-content {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 15s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}
</style>

—

### 🛠 Features:
– Responsive with Vuetify's layout.
– Repeats the content using a `v-for`.
– Smooth horizontal scroll using pure CSS.

—

Would you like the marquee to:
– scroll **right-to-left** or **left-to-right**?
– include **images** or **custom Vuetify components** (like `v-btn`, `v-card`, etc.)?

Let me know how fancy you want it!

Add Marquee in Vue

Leave a Comment Cancel