Cap-VMarquee-Nuxt3

Cap VMarquee Nuxt3 is Marquee component similar to Deprecated marquee html tag for Nuxt 3 FrameWork.

About

The Cap VMarquee Nuxt3 is an open-source library developed and maintained by CAP Company. It is developed using Nuxt 3 framework and tailwindcss.

Showcase

Quick Setup

1. Add Cap-VMarquee-Nuxt3 dependency to your project .

Using yarn :

yarn add Cap-VMarquee-Nuxt3

Using npm :

npm install Cap-VMarquee-Nuxt3

Using pnpm :

pnpm add Cap-VMarquee-Nuxt3

1. Add cap-vmarquee-nuxt3 to the modules of nuxt.config.ts

export default defineNuxtConfig({
  modules: ['cap-vmarquee-nuxt3']
});

That's it! You can now use library in your Nuxt app ✨

How to Use

Using the marquee is easy, you just need to import the library and use it as follows.

<VMarquee/>

Props

| Key | Type | Default | Description | sample | |------------------|--------------------|------------|--------------------------------------------------|--------| | duration | string \| number | 3 | defines how long an animation takes to complete | 2 | | delay | string \| number | 0 | sets the time before an animation starts. | 1 | | direction | TDirection | normal | specifies the direction the animation will play. | normal | | timingFunction | TTimingFunction | linear | controls the speed curve of an animation. | linear |

Types

type TDirection = "normal" | "reverse"

type TTimingFunction = "ease" | "linear" | "ease-in" | "ease-out" | "ease-in-out"

Full Sample Code

<VMarquee
  :duration="5"
  :delay="0"
  direction="normal"
  timing-function="ease-in-out"
>
  <h1>Mohammad Rouhani</h1>
</VMarquee>

Thank You

Thanks to all colleagues of CAP Company

Author : Mohammad Rouhani

Thank you my Colleague:

https://github.com/Ghanavati7915