{"id":12443,"library":"vue-context-menu","title":"Vue 2 Context Menu Component","description":"This package, `vue-context-menu`, provides a simple context menu component specifically designed for Vue 2 applications. It allows developers to easily integrate custom right-click menus into their Vue 2 projects, attaching them to specific DOM elements. The latest stable version is 2.0.6, last published in July 2017, indicating that the project is effectively abandoned with no active maintenance or updates. Its release cadence was sporadic and has ceased. Key differentiators at the time were its straightforward API for attaching menus via `v-ref` and handling `contextmenu.prevent` events. However, it lacks features common in modern alternatives like built-in theming, nested menus, or programmatic API options, and is fundamentally incompatible with Vue 3. For new projects or those using Vue 3, alternative context menu libraries are highly recommended.","status":"abandoned","version":"2.0.6","language":"javascript","source_language":"en","source_url":"https://github.com/vmaimone/vue-context-menu","tags":["javascript","component","vue","context","menu"],"install":[{"cmd":"npm install vue-context-menu","lang":"bash","label":"npm"},{"cmd":"yarn add vue-context-menu","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-context-menu","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for the Vue.js framework, specifically Vue 2.x.","package":"vue","optional":false}],"imports":[{"note":"This component is designed for Vue 2 applications. While CommonJS `require` might work in older Node environments, ES module imports are standard for modern Vue CLI projects, even those targeting Vue 2.","wrong":"const contextMenu = require('vue-context-menu')","symbol":"contextMenu","correct":"import contextMenu from 'vue-context-menu'"},{"note":"The `contextMenu` component must be explicitly registered in the `components` option of your Vue component to be used in its template.","symbol":"Component Registration","correct":"export default {\n  components: { contextMenu }\n}"}],"quickstart":{"code":"<template>\n  <div @contextmenu.prevent=\"$refs.ctxMenu.open\">\n    Right-click me for a context menu!\n  </div>\n\n  <context-menu id=\"my-context-menu\" ref=\"ctxMenu\">\n    <li @click=\"doSomething('Option 1 clicked')\">Option 1</li>\n    <li class=\"disabled\">Option 2 (Disabled)</li>\n    <li @click=\"doSomething('Option 3 clicked')\">Option 3</li>\n  </context-menu>\n</template>\n\n<script>\nimport contextMenu from 'vue-context-menu'\n\nexport default {\n  name: 'ContextMenuDemo',\n  components: { contextMenu },\n  methods: {\n    doSomething(message) {\n      alert(message)\n      // Optionally close the menu after action\n      this.$refs.ctxMenu.close()\n    }\n  }\n}\n</script>\n\n<style>\n/* Basic styling for the context menu for visibility */\n#my-context-menu {\n  border: 1px solid #ccc;\n  background: white;\n  box-shadow: 2px 2px 5px rgba(0,0,0,0.2);\n  list-style: none;\n  padding: 5px 0;\n  margin: 0;\n  position: fixed;\n  z-index: 1000;\n}\n#my-context-menu li {\n  padding: 8px 15px;\n  cursor: pointer;\n}\n#my-context-menu li:hover:not(.disabled) {\n  background-color: #f0f0f0;\n}\n#my-context-menu li.disabled {\n  color: #aaa;\n  cursor: not-allowed;\n}\n</style>","lang":"javascript","description":"This example demonstrates how to integrate `vue-context-menu` into a Vue 2 component, preventing the browser's default context menu and opening the custom one."},"warnings":[{"fix":"For Vue 3 projects, use a dedicated Vue 3 context menu library like `@imengyu/vue3-context-menu` or `vue-simple-context-menu`.","message":"This package is strictly for Vue 2.x applications. It is not compatible with Vue 3 and attempting to use it will result in critical errors due to significant API changes between Vue major versions.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Consider migrating to a more actively maintained context menu component, even for Vue 2 projects, to ensure ongoing support and security.","message":"The package is effectively abandoned, with the last npm publish in July 2017. This means no new features, bug fixes, security updates, or compatibility with newer JavaScript ecosystems (e.g., Vite, modern tooling) should be expected.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Ensure you install version 1.0.0 or higher for Vue 2.x compatibility. The provided example uses version 2.0.6, which is for Vue 2.x.","message":"Versions prior to 1.x (e.g., 0.0.13) were built for Vue 1.x. Using these older versions with Vue 2.x will cause breakage.","severity":"breaking","affected_versions":"<1.0.0"},{"fix":"Always use `@contextmenu.prevent` on the element that triggers the context menu, as shown in the quickstart example.","message":"The context menu relies on the `@contextmenu.prevent` event modifier. Forgetting this modifier will cause both the custom context menu and the browser's native context menu to appear simultaneously.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `import contextMenu from 'vue-context-menu'` is present and `components: { contextMenu }` is correctly defined in your Vue component's script section.","cause":"The `contextMenu` component was imported but not registered in the Vue component's `components` option, or there's a typo in the component name.","error":"Failed to resolve component: context-menu"},{"fix":"Verify that `ref=\"ctxMenu\"` is correctly assigned to the `<context-menu>` element and that the component is fully mounted before attempting to access it via `$refs`.","cause":"The `$refs.ctxMenu` might not be available at the time `$refs.ctxMenu.open()` is called, typically because the component isn't mounted yet or the `ref` attribute on `context-menu` is misspelled or missing.","error":"TypeError: Cannot read properties of undefined (reading 'open')"}],"ecosystem":"npm"}