{"id":20790280,"url":"https://github.com/redsuperbat/vue-custom-directives","last_synced_at":"2026-04-21T15:35:17.420Z","repository":{"id":55659995,"uuid":"321421609","full_name":"redsuperbat/vue-custom-directives","owner":"redsuperbat","description":null,"archived":false,"fork":false,"pushed_at":"2020-12-14T20:11:49.000Z","size":30,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-18T10:32:03.349Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/redsuperbat.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-12-14T17:22:47.000Z","updated_at":"2024-02-24T22:13:41.000Z","dependencies_parsed_at":"2022-08-15T05:50:28.739Z","dependency_job_id":null,"html_url":"https://github.com/redsuperbat/vue-custom-directives","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/redsuperbat%2Fvue-custom-directives","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/redsuperbat%2Fvue-custom-directives/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/redsuperbat%2Fvue-custom-directives/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/redsuperbat%2Fvue-custom-directives/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/redsuperbat","download_url":"https://codeload.github.com/redsuperbat/vue-custom-directives/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243136281,"owners_count":20241988,"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":[],"created_at":"2024-11-17T15:33:38.440Z","updated_at":"2026-04-21T15:35:12.373Z","avatar_url":"https://github.com/redsuperbat.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue 3 Directives\n\n## Description\n\nThese are useful directives that you can include into your vue application.\n\n| Directive       | Description                                                                                                                                                                                 |\n| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| v-click-outside | Specify a callback that will be triggered when user clicks outside element bound by directive                                                                                               |\n| v-expand        | Animate bound element when it enters the DOM. Only applicable if the element is also bound by v-if, v-show or v-else                                                                        |\n| v-hover         | Specify a callback that triggers when the user hovers over the element. True is passed to the callback when the user enters the element and false is passed when the user exits the element |\n| v-scoll         | Specify a callback that triggers when the element is visible on the page. The callback recives the element as it's argument when invoked                                                    |\n\n## Installation\n\n`npm i --save vue3-directives`\n\nTo only use certain directives and reduce bundle size, register your directives show below.\n\n```javascript\nimport { createApp } from \"vue\";\nimport App from \"./App.vue\";\nimport { vHover } from \"vue3-directives\";\n\ncreateApp(App).directive(vHover).mount(\"#app\");\n```\n\nAfter registering `v-hover` is available throughout your entire vue application\n\nThere is a quicker way to register all directives if you are going to use them:\n\n```javascript\nimport { createApp } from \"vue\";\nimport App from \"./App.vue\";\nimport VueCustomDirectives from \"vue3-directives\";\n\ncreateApp(App).use(VueCustomDirectives).mount(\"#app\");\n```\n\nThis will make all directives accessible throughout your application\n\n## Usage\n\n### v-click-outside\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv id=\"main\" style=\"width: 500px; height: 500px\"\u003e\n    \u003cp v-click-outside=\"clickedOutside\"\u003eVue 3 Directives is awesome!\u003c/p\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  export default {\n    setup() {\n      // Will only fire when the user clicks outside the p element\n      const clickedOutside = () =\u003e {\n        console.log(\"Im clicking outside the p element\");\n      };\n      return {\n        clickedOutside,\n      };\n    },\n  };\n\u003c/script\u003e\n```\n\n### v-hover\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv id=\"main\" style=\"width: 500px; height: 500px\"\u003e\n    \u003cp v-hover=\"onHover\"\u003eVue 3 Directives is awesome!\u003c/p\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  export default {\n    setup() {\n      // Function will fire when user enters and leaves the element p\n      const onHover = (bool) =\u003e {\n        console.log(bool); // Logs \"true\" when entering and \"false\" when leaving\n      };\n      return {\n        onHover,\n      };\n    },\n  };\n\u003c/script\u003e\n```\n\n### v-expand\n\nThe p element will animate when the button is clicked to show the text.\nv-expand can take two different arguments `v-expand:x` and `v-expand:y` depending on if you want the element to animate in from the x-axis or the y-axis\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv id=\"main\" style=\"width: 500px; height: 500px\"\u003e\n    \u003cp v-expand:y v-if=\"show\"\u003eVue 3 Directives is awesome!\u003c/p\u003e\n    \u003cbutton @click=\"toggleText\"\u003eclick me!\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import { ref } from \"vue\";\n  export default {\n    setup() {\n      const show = ref(false);\n      const toggleText = () =\u003e {\n        show.value = !show.value;\n      };\n      return {\n        show,\n        toggleText,\n      };\n    },\n  };\n\u003c/script\u003e\n```\n\n### v-scroll\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv id=\"main\" style=\"width: 500px; height: 500px\"\u003e\n    \u003cp v-scroll=\"onEnter\"\u003eVue 3 Directives is awesome!\u003c/p\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  export default {\n    setup() {\n      // Function will fire when the p element is visible to the user\n      // By adding a class that contains an animation you can animate the\n      // Element when it is visible to the user\n      const onEnter = (el) =\u003e {\n        el.classList.add(\"fade-animation\");\n      };\n      return {\n        onEnter,\n      };\n    },\n  };\n\u003c/script\u003e\n\n\u003cstyle scoped\u003e\n  .fade-animation {\n    animation: fade 1s ease;\n  }\n\n  @keyframes fade {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n\u003c/style\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fredsuperbat%2Fvue-custom-directives","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fredsuperbat%2Fvue-custom-directives","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fredsuperbat%2Fvue-custom-directives/lists"}