{"id":20467036,"url":"https://github.com/codekraft-studio/vue-context-menu","last_synced_at":"2026-06-07T15:31:58.433Z","repository":{"id":92944609,"uuid":"162098510","full_name":"codekraft-studio/vue-context-menu","owner":"codekraft-studio","description":"Functional and customizable context menu for VueJs","archived":false,"fork":false,"pushed_at":"2018-12-27T09:34:58.000Z","size":623,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-16T01:28:57.275Z","etag":null,"topics":["context-menu","vuejs","vuejs-components"],"latest_commit_sha":null,"homepage":null,"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/codekraft-studio.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-12-17T08:29:09.000Z","updated_at":"2018-12-27T09:34:48.000Z","dependencies_parsed_at":"2023-04-12T05:46:01.607Z","dependency_job_id":null,"html_url":"https://github.com/codekraft-studio/vue-context-menu","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/codekraft-studio%2Fvue-context-menu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codekraft-studio%2Fvue-context-menu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codekraft-studio%2Fvue-context-menu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codekraft-studio%2Fvue-context-menu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codekraft-studio","download_url":"https://codeload.github.com/codekraft-studio/vue-context-menu/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242031303,"owners_count":20060579,"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":["context-menu","vuejs","vuejs-components"],"created_at":"2024-11-15T13:26:50.839Z","updated_at":"2026-06-07T15:31:58.363Z","avatar_url":"https://github.com/codekraft-studio.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-context-menu\n\n\u003e functional and customizable context menu for VueJs\n\n[![NPM version][npm-image]][npm-url] [![Dependency Status][daviddm-image]][daviddm-url]\n\nCheck out the [demo](https://codekraft-studio.github.io/vue-context-menu/) to see it in action.\n\n## Installation\n\nDownload the project using your favorite package manager:\n\n```\nnpm install @codekraft-studio/vue-context-menu\nyarn add @codekraft-studio/vue-context-menu\n```\n\nThan import it in your project and load it:\n\n```js\nimport Vue from 'vue'\nimport VueContextMenu from '@codekraft-studio/vue-context-menu'\n\nVue.use(VueContextMenu)\n```\n\n## Usage\n\nIt's very simple to use, first you need to setup your context menu components with the menu template you desire:\n\n```html\n\u003cVueContextMenu ref=\"SimpleMenu\"\u003e\n  \u003cul\u003e\n    \u003cli\u003eFirst action\u003c/li\u003e\n    \u003cli\u003eSecond action\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/VueContextMenu\u003e\n```\n\nYou should assign a reference name to the component so it's accessible inside your component instance and template scope through `$refs` object, in case of the example above you can access the context menu via `$refs.SimpleMenu`.\n\nThe next step is to bind the context menu to the element(s) where he belongs:\n\n```html\n\u003cdiv class=\"container\" @contextmenu=\"$refs.SimpleMenu.open\"\u003e\n  \u003c!-- Some content --\u003e\n\u003c/div\u003e\n```\n\nWhen the rightclick (or contextmenu) event occurs on the element your custom menu should appear.\n\nYou can also pass a context object to the menu with the element clicked, this is useful in case of dynamic menus or lists:\n\n```html\n\u003cli v-for=\"(item, index) in items\" :key=\"index\" @contextmenu=\"$refs.ListMenu.open($event, item)\"\u003e\n  \u003cspan\u003e{{item.name}}\u003c/span\u003e\n\u003c/li\u003e\n\n\u003cVueContextMenu ref=\"ListMenu\"\u003e\n  \u003ctemplate slot-scope=\"{item}\"\u003e\n    \u003cul\u003e\n      \u003cli @click=\"onEditClick(item)\"\u003eEdit {{item.name}}\u003c/li\u003e\n      \u003cli @click=\"onRemoveClick(item)\"\u003eRemove {{item.name}}\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/template\u003e\n\u003c/VueContextMenu\u003e\n```\n\nIn the example above the context menu will open with the `item` value as context and it's forwarded to the menu actions methods.\n\nBe sure to add the `$event` object as __first argument__ of the __open__ method, otherwise it will not work properly.\n\n## Methods\n\nUsually you should use only the __open__ method and bind it to the `@contextmenu` event of your elements, but here a list of the component methods:\n\n#### .open(event, context = {})\n\nEnsure the position of the context menu relative to the target element of the event and shows it, the optional context is forwarded to the menu template scope.\n\n#### .close()\n\nHide the context menu and reset it's position.\n\n---\n\n## Project setup\n```\nyarn install\n```\n\n### Compiles and hot-reloads for development\n```\nyarn run serve\n```\n\n### Compiles and minifies for production\n```\nyarn run build\n```\n\n### Run your tests\n```\nyarn run test\n```\n\n### Lints and fixes files\n```\nyarn run lint\n```\n\n### Run your unit tests\n```\nyarn run test:unit\n```\n\n---\n\n## License\n\nThis project is released under [MIT License](LICENSE) by [codekraft-studio](https://github.com/codekraft-studio).\n\n[npm-image]: https://badge.fury.io/js/%40codekraft-studio%2Fvue-context-menu.svg\n\n[npm-url]: https://npmjs.org/package/@codekraft-studio/vue-context-menu\n\n[daviddm-image]: https://david-dm.org/codekraft-studio/vue-context-menu.svg?theme=shields.io\n\n[daviddm-url]: https://david-dm.org/codekraft-studio/vue-context-menu\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodekraft-studio%2Fvue-context-menu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodekraft-studio%2Fvue-context-menu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodekraft-studio%2Fvue-context-menu/lists"}