https://github.com/selemondev/marquee
A Beautiful Marquee component for Vue ✨.
https://github.com/selemondev/marquee
marquee tailwindcss typescript vue3 vue3-marquee
Last synced: about 1 year ago
JSON representation
A Beautiful Marquee component for Vue ✨.
- Host: GitHub
- URL: https://github.com/selemondev/marquee
- Owner: selemondev
- License: mit
- Created: 2024-02-04T21:21:36.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2025-01-20T06:53:19.000Z (over 1 year ago)
- Last Synced: 2025-03-30T11:08:45.606Z (over 1 year ago)
- Topics: marquee, tailwindcss, typescript, vue3, vue3-marquee
- Language: Vue
- Homepage: https://vue3-marquee-component.vercel.app/
- Size: 229 KB
- Stars: 99
- Watchers: 2
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Marquee
🌬️
> A beautiful marquee component for Vue ✨.
## Installation
```bash
npm install @selemondev/vue3-marquee
```
or you can skip the npm install, and just copy and paste the source code into your component like Shadcn Vue (don't forget to also copy the tailwind config if you do this).
## Register it as a global component
```js
import { Marquee } from "@selemondev/vue3-marquee";
import "@selemondev/vue3-marquee/dist/style.css"
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App);
app.component('Marquee', Marquee)
app.mount('#app')
```
or
## Register it as a local component
```js
import { Marquee } from "@selemondev/vue3-marquee";
import "@selemondev/vue3-marquee/dist/style.css"
```
## Nuxt
If you are using Nuxt 3, you can simply register it as a Nuxt plugin as shown below:
```ts
// plugins/marquee.ts
import { Marquee } from "@selemondev/vue3-marquee";
import "@selemondev/vue3-marquee/dist/style.css"
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.component('Marquee', Marquee)
})
```
## Usage
The library has a few props that are self-explanatory, you can get it running in no time. See the web examples for more details.
```js
Content 1
Content 2
Content 3
Content 4
```
This library is made specifically for Tailwind users, however you can also use vanilla CSS classes to override the gap.
## Credits
- Inspired by [@devnomic's](https://github.com/devnomic) React Marquee component.
## License
Released under [MIT](/LICENSE) by [@selemondev](https://github.com/selemondev).