{"id":17152065,"url":"https://github.com/selemondev/marquee","last_synced_at":"2025-04-06T12:10:58.438Z","repository":{"id":220873824,"uuid":"752810050","full_name":"selemondev/marquee","owner":"selemondev","description":"A Beautiful Marquee component for Vue ✨.","archived":false,"fork":false,"pushed_at":"2025-01-20T06:53:19.000Z","size":234,"stargazers_count":99,"open_issues_count":0,"forks_count":6,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-30T11:08:45.606Z","etag":null,"topics":["marquee","tailwindcss","typescript","vue3","vue3-marquee"],"latest_commit_sha":null,"homepage":"https://vue3-marquee-component.vercel.app/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/selemondev.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-02-04T21:21:36.000Z","updated_at":"2025-01-31T02:58:52.000Z","dependencies_parsed_at":"2024-02-24T13:44:50.511Z","dependency_job_id":"b1105390-d94b-44c0-ad99-71519e1478a1","html_url":"https://github.com/selemondev/marquee","commit_stats":null,"previous_names":["selemondev/marquee"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/selemondev%2Fmarquee","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/selemondev%2Fmarquee/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/selemondev%2Fmarquee/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/selemondev%2Fmarquee/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/selemondev","download_url":"https://codeload.github.com/selemondev/marquee/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247478324,"owners_count":20945266,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["marquee","tailwindcss","typescript","vue3","vue3-marquee"],"created_at":"2024-10-14T21:42:44.099Z","updated_at":"2025-04-06T12:10:58.410Z","avatar_url":"https://github.com/selemondev.png","language":"Vue","funding_links":[],"categories":["CSS"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n# Marquee \u003cbr\u003e 🌬️\n\n\u003e A beautiful marquee component for Vue ✨.\n\n\u003c/div\u003e\n\n## Installation\n\n```bash\nnpm install @selemondev/vue3-marquee\n```\nor 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).\n\n## Register it as a global component\n\n```js\nimport { Marquee } from \"@selemondev/vue3-marquee\";\nimport \"@selemondev/vue3-marquee/dist/style.css\"\nimport { createApp } from 'vue'\nimport App from './App.vue'\n\nconst app = createApp(App);\napp.component('Marquee', Marquee)\napp.mount('#app')\n```\n\nor \n\n## Register it as a local component\n\n```js\nimport { Marquee } from \"@selemondev/vue3-marquee\";\nimport \"@selemondev/vue3-marquee/dist/style.css\"\n```\n\n## Nuxt\n\nIf you are using Nuxt 3, you can simply register it as a Nuxt plugin as shown below:\n\n```ts\n// plugins/marquee.ts\n\nimport { Marquee } from \"@selemondev/vue3-marquee\";\nimport \"@selemondev/vue3-marquee/dist/style.css\"\nexport default defineNuxtPlugin((nuxtApp) =\u003e {\n    nuxtApp.vueApp.component('Marquee', Marquee)\n})\n```\n\n## Usage\n\nThe library has a few props that are self-explanatory, you can get it running in no time. See the web examples for more details.\n\n```js\n\u003cMarquee\n  :fade=\"true\"\n  direction=\"left\"\n  :reverse=\"false\"\n  :pauseOnHover=\"false\"\n  className=\"\" // pass class to change gap or speed\n  innerClassName=\"\" // pass class to change gap or speed\n\u003e\n  \u003cdiv\u003eContent 1\u003c/div\u003e\n  \u003cdiv\u003eContent 2\u003c/div\u003e\n  \u003cdiv\u003eContent 3\u003c/div\u003e\n  \u003cdiv\u003eContent 4\u003c/div\u003e\n\u003c/Marquee\u003e\n```\n\nThis library is made specifically for Tailwind users, however you can also use vanilla CSS classes to override the gap.\n\n## Credits\n\n- Inspired by [@devnomic's](https://github.com/devnomic) React Marquee component.\n\n## License\n\nReleased under [MIT](/LICENSE) by [@selemondev](https://github.com/selemondev).\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fselemondev%2Fmarquee","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fselemondev%2Fmarquee","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fselemondev%2Fmarquee/lists"}