cap-vmarquee-nuxt3

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