{"id":26611,"library":"vue-contextmenu","title":"vue-contextmenu","description":"Vue 2 context menu component. Version 1.5.11 is the latest stable release as of 2023, but the package has seen no updates since 2019. It provides customizable right-click context menus with support for icons, submenus, disabled items, and events. The component is mounted globally via Vue.use() and uses a data-driven approach. Alternatives include vue-context (more maintained) or custom implementations. It lacks TypeScript support and has limited documentation.","status":"maintenance","version":"1.5.11","language":"javascript","source_language":"en","source_url":null,"tags":["javascript"],"install":[{"cmd":"npm install vue-contextmenu","lang":"bash","label":"npm"},{"cmd":"yarn add vue-contextmenu","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-contextmenu","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"This is a default export; named import will result in undefined. Use Vue.use(VueContextMenu) for global registration.","wrong":"import { VueContextMenu } from 'vue-contextmenu'","symbol":"VueContextMenu","correct":"import VueContextMenu from 'vue-contextmenu'"},{"note":"The component is registered globally with the kebab-case name 'vue-context-menu' after Vue.use(). Using PascalCase in template will not work unless explicitly registered.","wrong":"<VueContextMenu :contextMenuData=\"data\" />","symbol":"vue-context-menu component","correct":"<vue-context-menu :contextMenuData=\"data\" />"},{"note":"Must import the default export and pass it to Vue.use(). The package does not export a Vue plugin object compatible with require.","wrong":"Vue.use(vue-contextmenu) or Vue.use(require('vue-contextmenu'))","symbol":"Vue.use()","correct":"import VueContextMenu from 'vue-contextmenu'\nVue.use(VueContextMenu)"}],"quickstart":{"code":"// Install: npm install vue-contextmenu@1.5.11 --save\n\n// main.js\nimport Vue from 'vue'\nimport VueContextMenu from 'vue-contextmenu'\nVue.use(VueContextMenu)\n\nnew Vue({ el: '#app', template: '<App/>', components: { App } })\n\n// App.vue\n<template>\n  <div id=\"app\" @contextmenu.prevent=\"showMenu\" style=\"width:200px;height:200px;background:red;\">\n    <vue-context-menu :contextMenuData=\"contextMenuData\" @savedata=\"savedata\" @newdata=\"newdata\"></vue-context-menu>\n  </div>\n</template>\n<script>\nexport default {\n  data() {\n    return {\n      contextMenuData: {\n        menuName: 'demo',\n        axis: { x: null, y: null },\n        menulists: [\n          { fnHandler: 'savedata', icoName: 'fa fa-home', btnName: 'Save' },\n          { fnHandler: 'newdata', icoName: 'fa fa-file', btnName: 'New' }\n        ]\n      }\n    }\n  },\n  methods: {\n    showMenu(event) {\n      this.contextMenuData.axis = { x: event.clientX, y: event.clientY }\n    },\n    savedata() { alert('saved') },\n    newdata() { console.log('new') }\n  }\n}\n</script>","lang":"javascript","description":"Shows basic usage: install, global registration, and a simple context menu with two options that trigger events."},"warnings":[{"fix":"Add 'menuName: 'your-menu-name' to your contextMenuData object.","message":"Since version 1.4.1, the `menuName` property in contextMenuData is required. Without it, the menu may not display correctly.","severity":"breaking","affected_versions":">=1.4.1"},{"fix":"Consider migrating to an alternative like 'vue-context' or 'vue-simple-context-menu'.","message":"The package is no longer maintained. No updates since 2019. It may have compatibility issues with newer Vue versions or browsers.","severity":"deprecated","affected_versions":"all"},{"fix":"Always use <vue-context-menu> in templates.","message":"The component registers globally as 'vue-context-menu' (kebab-case). Using PascalCase 'VueContextMenu' in templates will not work.","severity":"gotcha","affected_versions":"all"},{"fix":"Ensure that for fnHandler: 'savedata', you listen for @savedata in the template.","message":"Event handler names defined in 'fnHandler' must match the event names emitted by the component (e.g., @savedata). The event name is derived from the fnHandler string.","severity":"gotcha","affected_versions":"all"},{"fix":"Bind :transferIndex to the current loop index and set it in the showMenu method.","message":"When using list rendering, you must set 'transferIndex' to identify which item's menu is shown. Without it, all menus may display simultaneously.","severity":"breaking","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Set axis: { x: null, y: null } in data.","cause":"The 'axis' property in contextMenuData is not initialized or is null.","error":"Cannot read property 'x' of null"},{"fix":"Import VueContextMenu from 'vue-contextmenu' and call Vue.use(VueContextMenu) before creating the Vue instance.","cause":"Component not registered via Vue.use(VueContextMenu).","error":"Unknown custom element: <vue-context-menu> - did you register the component correctly?"},{"fix":"Use: import VueContextMenu from 'vue-contextmenu' (without curly braces).","cause":"Using named import instead of default import.","error":"TypeError: _default is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}