vue-contextmenu

1.5.11 verified Fri May 01 auth: no javascript maintenance

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.

Common errors

error Cannot read property 'x' of null ↓

cause The 'axis' property in contextMenuData is not initialized or is null.

fix

Set axis: { x: null, y: null } in data.

error Unknown custom element: <vue-context-menu> - did you register the component correctly? ↓

cause Component not registered via Vue.use(VueContextMenu).

fix

Import VueContextMenu from 'vue-contextmenu' and call Vue.use(VueContextMenu) before creating the Vue instance.

error TypeError: _default is not a function ↓

cause Using named import instead of default import.

fix

Use: import VueContextMenu from 'vue-contextmenu' (without curly braces).

Warnings

breaking Since version 1.4.1, the `menuName` property in contextMenuData is required. Without it, the menu may not display correctly. ↓

fix Add 'menuName: 'your-menu-name' to your contextMenuData object.

deprecated The package is no longer maintained. No updates since 2019. It may have compatibility issues with newer Vue versions or browsers. ↓

fix Consider migrating to an alternative like 'vue-context' or 'vue-simple-context-menu'.

gotcha The component registers globally as 'vue-context-menu' (kebab-case). Using PascalCase 'VueContextMenu' in templates will not work. ↓

fix Always use <vue-context-menu> in templates.

gotcha 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. ↓

fix Ensure that for fnHandler: 'savedata', you listen for @savedata in the template.

breaking When using list rendering, you must set 'transferIndex' to identify which item's menu is shown. Without it, all menus may display simultaneously. ↓

fix Bind :transferIndex to the current loop index and set it in the showMenu method.

Install

npm install vue-contextmenu

yarn add vue-contextmenu

pnpm add vue-contextmenu

Imports

VueContextMenu
wrong
```
import { VueContextMenu } from 'vue-contextmenu'
```
correct
```
import VueContextMenu from 'vue-contextmenu'
```
This is a default export; named import will result in undefined. Use Vue.use(VueContextMenu) for global registration.
vue-context-menu component
wrong
```
<VueContextMenu :contextMenuData="data" />
```
correct
```
<vue-context-menu :contextMenuData="data" />
```
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.
Vue.use()
wrong
```
Vue.use(vue-contextmenu) or Vue.use(require('vue-contextmenu'))
```
correct
```
import VueContextMenu from 'vue-contextmenu'
Vue.use(VueContextMenu)
```
Must import the default export and pass it to Vue.use(). The package does not export a Vue plugin object compatible with require.

Quickstart

Shows basic usage: install, global registration, and a simple context menu with two options that trigger events.

// Install: npm install vue-contextmenu@1.5.11 --save

// main.js
import Vue from 'vue'
import VueContextMenu from 'vue-contextmenu'
Vue.use(VueContextMenu)

new Vue({ el: '#app', template: '<App/>', components: { App } })

// App.vue
<template>
  <div id="app" @contextmenu.prevent="showMenu" style="width:200px;height:200px;background:red;">
    <vue-context-menu :contextMenuData="contextMenuData" @savedata="savedata" @newdata="newdata"></vue-context-menu>
  </div>
</template>
<script>
export default {
  data() {
    return {
      contextMenuData: {
        menuName: 'demo',
        axis: { x: null, y: null },
        menulists: [
          { fnHandler: 'savedata', icoName: 'fa fa-home', btnName: 'Save' },
          { fnHandler: 'newdata', icoName: 'fa fa-file', btnName: 'New' }
        ]
      }
    }
  },
  methods: {
    showMenu(event) {
      this.contextMenuData.axis = { x: event.clientX, y: event.clientY }
    },
    savedata() { alert('saved') },
    newdata() { console.log('new') }
  }
}
</script>