0.0.6 • Published 12 months ago
cap-vmarquee-nuxt3 v0.0.6
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
- Add
Cap-VMarquee-Nuxt3dependency to your project .
Using yarn :
yarn add Cap-VMarquee-Nuxt3Using npm :
npm install Cap-VMarquee-Nuxt3Using pnpm :
pnpm add Cap-VMarquee-Nuxt3- Add
cap-vmarquee-nuxt3to themodulesofnuxt.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