{"id":21803503,"url":"https://github.com/luxdamore/vue-cursor-fx","last_synced_at":"2025-08-21T17:31:45.581Z","repository":{"id":37663902,"uuid":"193054201","full_name":"LuXDAmore/vue-cursor-fx","owner":"LuXDAmore","description":"🖱 An animated custom cursor effects for interactive elements like navigation - w/ VueJS - SSR Compatible","archived":false,"fork":false,"pushed_at":"2023-03-07T01:51:02.000Z","size":3552,"stargazers_count":68,"open_issues_count":8,"forks_count":17,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-12-15T17:09:26.519Z","etag":null,"topics":["codrops","cursor","cursor-theme","design","effects","nuxt-module","nuxtjs","pointer","tympanus","ui-components","ui-design","vue-module","vuejs"],"latest_commit_sha":null,"homepage":"https://luxdamore.github.io/vue-cursor-fx","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/LuXDAmore.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null},"funding":{"patreon":"luxdamore","open_collective":"luca-iaconelli","ko_fi":"luxdamore","liberapay":"luxdamore","issuehunt":"luxdamore","otechie":"luxdamore","custom":["https://www.paypal.me/luxdamore"]}},"created_at":"2019-06-21T07:41:37.000Z","updated_at":"2024-11-07T16:40:29.000Z","dependencies_parsed_at":"2023-12-19T01:01:46.733Z","dependency_job_id":"3946da0e-c8b6-4861-b9a1-a4c2da27b23b","html_url":"https://github.com/LuXDAmore/vue-cursor-fx","commit_stats":{"total_commits":332,"total_committers":4,"mean_commits":83.0,"dds":0.009036144578313254,"last_synced_commit":"8a83852b31fe5e009f420012a61e00580efeb1f5"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LuXDAmore%2Fvue-cursor-fx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LuXDAmore%2Fvue-cursor-fx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LuXDAmore%2Fvue-cursor-fx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LuXDAmore%2Fvue-cursor-fx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LuXDAmore","download_url":"https://codeload.github.com/LuXDAmore/vue-cursor-fx/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230523761,"owners_count":18239445,"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":["codrops","cursor","cursor-theme","design","effects","nuxt-module","nuxtjs","pointer","tympanus","ui-components","ui-design","vue-module","vuejs"],"created_at":"2024-11-27T11:44:18.377Z","updated_at":"2024-12-20T02:06:34.173Z","avatar_url":"https://github.com/LuXDAmore.png","language":"Vue","funding_links":["https://patreon.com/luxdamore","https://opencollective.com/luca-iaconelli","https://ko-fi.com/luxdamore","https://liberapay.com/luxdamore","https://issuehunt.io/r/luxdamore","https://otechie.com/luxdamore","https://www.paypal.me/luxdamore","https://www.patreon.com/luxdamore"],"categories":[],"sub_categories":[],"readme":"# 🎉 Vue Cursor Fx\n\n[![Code Quality][quality-src]][quality-href]\n[![Downloads][npm-downloads-src]][npm-downloads-href]\n[![Dependencies][dependencies-src]][dependencies-href]\n[![Version][npm-version-src]][npm-version-href]\n[![Donate][paypal-donate-src]][paypal-donate-href]\n\n[quality-src]: https://img.shields.io/badge/code%20quality-A-informational?style=flat\n[quality-href]: https://luxdamore.github.io/vue-cursor-fx/\n\n[npm-downloads-src]: https://img.shields.io/npm/dt/@luxdamore/vue-cursor-fx.svg?style=flat\u0026color=darkgreen\n[npm-downloads-href]: https://npmjs.com/package/@luxdamore/vue-cursor-fx\n\n[dependencies-src]: https://img.shields.io/badge/dependencies-up%20to%20date-darkgreen.svg?style=flat\n[dependencies-href]: https://npmjs.com/package/@luxdamore/vue-cursor-fx\n\n[npm-version-src]: https://img.shields.io/npm/v/@luxdamore/vue-cursor-fx/latest.svg?style=flat\u0026color=darkorange\u0026label=version\n[npm-version-href]: https://npmjs.com/package/@luxdamore/vue-cursor-fx\n\n[paypal-donate-src]: https://img.shields.io/badge/paypal-donate-black.svg?style=flat\n[paypal-donate-href]: https://www.paypal.me/luxdamore\n[patreon-donate-href]: https://www.patreon.com/luxdamore\n[kofi-donate-href]: https://ko-fi.com/luxdamore\n\n\u003e An animated custom cursor effects for interactive elements like navigation - w/ VueJS - SSR Compatible\n\n## Installation\n\nThis package is available on `npm` and `yarn`.\n\n```bash\n\n    # Deps\n    npm install --save @luxdamore/vue-cursor-fx\n\n    # Or\n    yarn add @luxdamore/vue-cursor-fx\n\n```\n\n### Usage\n\n#### As component\n\n```js\n\n    // Global component and css\n    import { CursorFx } from '@luxdamore/vue-cursor-fx';\n    import '@luxdamore/vue-cursor-fx/dist/CursorFx.css';\n\n    // Install\n    Vue.component(\n        CursorFx.name,\n        CursorFx\n    );\n\n\n    // Or, in a .vue file\n    import { CursorFx } from '@luxdamore/vue-cursor-fx';\n\n    export default {\n        components: {\n            'cursor-fx': CursorFx,\n        },\n    };\n\n    \u003cstyle src=\"@luxdamore/vue-cursor-fx/dist/CursorFx.css\"\u003e\u003c/style\u003e\n\n```\n\n#### As a global plugin\n\n```js\n\n    // Plugin\n    import CursorFx from '@luxdamore/vue-cursor-fx';\n    import '@luxdamore/vue-cursor-fx/dist/CursorFx.css';\n\n    // Install\n    Vue.use(\n        CursorFx\n    );\n\n```\n\n#### Browser's way\n\n```html\n\n    \u003c!doctype html\u003e\n    \u003chtml\u003e\n        \u003chead\u003e\n\n            \u003c!-- CursorFx styles --\u003e\n\n            \u003c!-- Old way --\u003e\n            \u003clink rel=\"stylesheet\" href=\"https://unpkg.com/@luxdamore/vue-cursor-fx@latest/dist/CursorFx.css\" /\u003e\n            \u003c!-- end old way --\u003e\n\n            \u003c!-- New way --\u003e\n            \u003clink rel=\"preload\" href=\"https://unpkg.com/@luxdamore/vue-cursor-fx@latest/dist/CursorFx.css\" as=\"style\" onload=\"this.rel='stylesheet'\" /\u003e\n            \u003clink rel=\"preload\" href=\"https://unpkg.com/@luxdamore/vue-cursor-fx@latest/dist/CursorFx.umd.min.js\" as=\"script\" /\u003e\n            \u003c!-- end new way --\u003e\n\n            \u003c!-- end CursorFx styles --\u003e\n\n        \u003c/head\u003e\n        \u003cbody\u003e\n\n            \u003c!--\n                Others script (ex. VueJs) and html.\n            --\u003e\n\n            \u003c!-- CursorFx script --\u003e\n            \u003cscript src=\"https://unpkg.com/@luxdamore/vue-cursor-fx@latest/dist/CursorFx.umd.min.js\"\u003e\u003c/script\u003e\n            \u003c!-- end CursorFx script --\u003e\n\n        \u003c/body\u003e\n    \u003c/html\u003e\n\n```\n\n#### Markup\n\n_Use one time in the main file of your project or in every views, where you want it._\n\n```html\n\n    \u003cbutton\n        type=\"button\"\n        title=\"Special button\"\n        data-cursor-hover\n    \u003e\n        Add `data-cursor-hover` to an every html elements that you want to see the cursor bigger on hover\n    \u003c/button\u003e\n\n    \u003cbutton\n        type=\"button\"\n        title=\"Special button\"\n        data-cursor-hidden\n    \u003e\n        Add `data-cursor-hidden` to an every html elements that you want to hide the cursor on hover\n    \u003c/button\u003e\n\n    \u003cbutton\n        type=\"button\"\n        title=\"Special button\"\n        data-cursor-hover\n        data-cursor-mix-blend-mode=\"difference\"\n    \u003e\n        Add `data-cursor-mix-blend-mode` to an every html elements that you want to change the mix-blend-mode type.\n    \u003c/button\u003e\n\n    \u003ccursor-fx /\u003e\n\n```\n\n### Options\n\n_N.B.: the cursor is not activated on touchscreen devices._\n\n#### Slots\n\n```bash\n\n    # Available\n    slot=\"default\"  # Add some content in the middle of the cursor\n\n```\n\n#### Events\n\n```html\n\n    \u003ccursor-fx\n        @before-start=\"onBeforeStart\"\n        @after-start=\"onAfterStart\"\n        @ready=\"onReady\"\n        @before-destroy=\"onBeforeDestroy\"\n        @after-destroy=\"onAfterDestroy\"\n    \u003e\u003c/cursor-fx\u003e\n\n```\n\n#### Props\n\n| Attribute | Type | Default value | About |\n|:--------------------:|--------------------|:-------:|-------------------------------------|\n| config | Object | {} | The default options applied to cursor, see below the `BASE_CONFIG` |\n| color | String | #333333 |Color for the cursor |\n| color-hover | String | #333333 | Color, on hover, for the cursor |\n| outside-size | String | null | The size of outer circle |\n| inside-size | String | null | The size of inner dot |\n| shape | String | null | Only available shapes are `circle` and `square` |\n| delay | String, Number | 60 | Activate cursor after x seconds |\n| mix-blend-mode | String | null | Set the global `mix-blend-mode` style |\n| force-custom-slot | Boolean | false | Show or hide the internal default slot |\n| allow-on-mobile | Boolean | false | Allow the cursor on mobile devices |\n| hide-outside | Boolean | false | Hide outer circle |\n| hide-inside | Boolean | false | Hide inner dot |\n| disabled | Boolean | false | Disable the activation of the cursor |\n\n```js\n\n    const BASE_CONFIG = {\n        lerps: {\n            dot: 1,\n            circle: 0.18,\n            custom: 0.23,\n        },\n        scale: {\n            ratio: 0.18,\n            min: 0.5,\n            max: 1,\n        },\n        opacity: 0.1,\n    };\n\n```\n\n#### Methods\n\n```html\n\n    \u003c!-- component.vue --\u003e\n    \u003ctemplate\u003e\n        \u003cdiv\u003e\n\n            \u003c!-- start it, later --\u003e\n            \u003ccursor-fx ref=\"cursor\" disabled /\u003e\n\n        \u003c/div\u003e\n    \u003c/template\u003e\n\n    \u003c!-- Component --\u003e\n    \u003cscript\u003e\n        export default {\n            mounted() {\n\n                // start it, on mounted, or wherever you want\n                this.$refs.cursor.start();\n\n            },\n            methods: {\n                others() {\n\n                    // destroy\n                    this.$refs.cursor.destroy();\n\n                    //-\u003e refresh automate: `destroy()` and `start()`\n                    this.$refs.cursor.refresh();\n\n                },\n            }\n        },\n    \u003c/script\u003e\n\n```\n\n#### Integrations\n\n##### VueRouter\n\n```html\n\n    \u003c!-- App.vue --\u003e\n    \u003ctemplate\u003e\n        \u003cdiv\u003e\n\n            \u003crouter-view\u003e\u003c/router-view\u003e\n\n            \u003ccursor-fx ref=\"cursor\" /\u003e\n\n        \u003c/div\u003e\n    \u003c/template\u003e\n\n```\n\n##### NuxtJs\n\n- For the entire website: place the component in the desired layouts (ex. layouts/default.vue);\n- For some pages only: place the component in the desired pages (ex. pages/index.vue).\n\n```html\n\n    \u003c!-- layout/default.vue --\u003e\n    \u003ctemplate\u003e\n        \u003cdiv\u003e\n\n            \u003cmain\u003e\n                \u003cnuxt /\u003e\n            \u003c/main\u003e\n\n            \u003ccursor-fx ref=\"cursor\" /\u003e\n\n        \u003c/div\u003e\n    \u003c/template\u003e\n\n```\n\n##### Tips\n- Q: How to fix problem with the disappearance of the cursor on nuxt route change ?\n- A: Trigger cursor refresh on route change where component is placed.\n\n```js\n\n    watch: {\n        $route( to, from ) {\n        \n            this.$nextTick( () =\u003e this.$refs.cursor.refresh() );\n            \n        },\n    },\n\n```\n\n___\n\n## 👩🏻‍💻👨🏻‍💻 Development\n\n1. **Clone** the repository:\n   - `git clone https://github.com/LuXDAmore/vue-cursor-fx.git`;\n2. **Install** dependencies:\n   - `yarn install` (or `npm install`);\n3. **Start** a development server:\n   - `yarn dev` (or `npm run dev`);\n4. **Extra**, build the documentation ([*Github Pages*](https://pages.github.com/)):\n   - `yarn build` (or `npm run build`);\n   - _the content is automatically generated into the `/docs` folder_.\n\n## 🐞 Issues\n\nPlease make sure to read the [**issue reporting checklist**](./.github/ISSUE_TEMPLATE/bug_report.md) before opening an issue.\n*Issues not conforming to the guidelines may be closed immediately*.\n\n## 📝 Discussions\n\nWe're using [**Github discussions**](https://github.com/LuXDAmore/vue-cursor-fx/discussions) as a place to connect with other members of our community.\n*You are free to ask questions and share ideas, so enjoy yourself*.\n\n## 👥 Contribution\n\nPlease make sure to read the [**contributing guide**](./.github/ISSUE_TEMPLATE/feature_request.md) before making a pull request.\n\n## 📖 Changelog\n\nDetails changes for each release are documented in the [**release notes**](./CHANGELOG.md).\n\n### 🆓 License\n\n[MIT License](./LICENSE) // Copyright (©) 2019-now [Luca Iaconelli](https://lucaiaconelli.it)\n\n#### 💼 Hire me\n\n[![Contacts](https://img.shields.io/badge/Contact%20Me-Let's%20Talk-informational?style=social\u0026logo=minutemailer)](https://curriculumvitae.lucaiaconelli.it)\n\n#### 💸 Are you feeling generous today?\n\nIf You want to share a beer, we can be really good friends 😄\n\n__[Paypal][paypal-donate-href] // [Patreon][patreon-donate-href] // [Ko-fi][kofi-donate-href]__\n\n\u003e ☀ _It's always a good day to be magnanimous_ - cit.\n\n___\n\n#### 💡 Lighthouse\n\n![Lighthouse audit score](./lighthouse-audit.jpg)\n\n___\n\n#### 💘 Inspired by\n\n[CustomCursors by Tympanus](https://tympanus.net/Tutorials/CustomCursors/index3.html)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluxdamore%2Fvue-cursor-fx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fluxdamore%2Fvue-cursor-fx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluxdamore%2Fvue-cursor-fx/lists"}