{"id":18909,"library":"vue-contextmenujs","title":"vue-contextmenujs","description":"Vue 2 context menu component with native implementation and zero dependencies. Latest version 1.4.11 (last updated 2023). Provides a simple API via `$contextmenu` to display right-click menus with nested items, icons, disabled states, and custom styling. Key differentiator: purely Vue-based, no external dependencies like Popper.js, and supports CDN usage. Suitable for Vue 2 projects needing a lightweight, customizable context menu.","status":"maintenance","version":"1.4.11","language":"javascript","source_language":"en","source_url":"https://github.com/GitHub-Laziji/menujs","tags":["javascript","Vue","Contextmenu","右键菜单"],"install":[{"cmd":"npm install vue-contextmenujs","lang":"bash","label":"npm"},{"cmd":"yarn add vue-contextmenujs","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-contextmenujs","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Package does not ship TypeScript types.","wrong":"const Contextmenu = require('vue-contextmenujs')","symbol":"default (Contextmenu)","correct":"import Contextmenu from 'vue-contextmenujs'"},{"note":"Case-sensitive: use camelCase exactly as shown. Only available after Vue.use(Contextmenu).","wrong":"this.$contextMenu(options)","symbol":"$contextmenu","correct":"this.$contextmenu(options)"},{"note":"Manually destroy the context menu.","symbol":"$contextmenu.destroy","correct":"this.$contextmenu.destroy()"}],"quickstart":{"code":"import Vue from 'vue';\nimport Contextmenu from 'vue-contextmenujs';\nVue.use(Contextmenu);\n\nnew Vue({\n  el: '#app',\n  data: { message: '' },\n  methods: {\n    onContextmenu(event) {\n      this.$contextmenu({\n        items: [\n          { label: 'Option 1', onClick: () => { this.message = 'Option 1 clicked'; } },\n          { label: 'Option 2', disabled: true },\n          { label: 'Option 3', divided: true, icon: 'el-icon-star-on' },\n          {\n            label: 'Submenu',\n            children: [\n              { label: 'Sub Option 1', onClick: () => { this.message = 'Sub Option 1'; } },\n              { label: 'Sub Option 2' }\n            ]\n          }\n        ],\n        event,\n        customClass: 'my-menu',\n        zIndex: 3,\n        minWidth: 230\n      });\n      event.preventDefault();\n    }\n  }\n});","lang":"javascript","description":"Shows how to install, register the plugin, and create a context menu with nested items, icons, disabled state, and custom styling."},"warnings":[{"fix":"Use vue3-contextmenujs or another Vue 3 compatible library.","message":"Package is for Vue 2 only. Do not use with Vue 3 or above.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always pass the native 'event' object from @contextmenu handler, or provide explicit 'x' and 'y' coordinates.","message":"'event' property in MenuOptions is required for correct positioning; if omitted, menu may appear at (0,0).","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Consider migrating to actively maintained alternatives if needed.","message":"No new updates since 2023. Package is in maintenance mode.","severity":"deprecated","affected_versions":"1.4.11"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Ensure Vue.use(Contextmenu) is executed before creating any Vue instance.","cause":"Vue.use(Contextmenu) not called or called too late.","error":"this.$contextmenu is not a function"},{"fix":"Only call $contextmenu.destroy() after a menu has been displayed, or check existence: if (this.$contextmenu) this.$contextmenu.destroy();","cause":"Trying to call $contextmenu.destroy() before any menu has been shown.","error":"Cannot read property 'destroy' of undefined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}