Registry / web-framework / vue-contextmenu

vue-contextmenu

library1.5.11jsnpmunverified

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.

web-framework

npm install vue-contextmenu

package ↗

INSTALL

IMPORT

SIG · VUE-CONTEXTMENU

vue-contextmenu

web-frameworkjavascriptv1.5.11

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VueContextMenu

✓ import VueContextMenu from 'vue-contextmenu'

✗ 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

✓ <vue-context-menu :contextMenuData="data" />

✗ <VueContextMenu :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()

✓ import VueContextMenu from 'vue-contextmenu' Vue.use(VueContextMenu)

✗ Vue.use(vue-contextmenu) or Vue.use(require('vue-contextmenu'))

Must import the default export and pass it to Vue.use(). The package does not export a Vue plugin object compatible with require.

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>

Debug

Known issues

breakingSince 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.

affects: >=1.4.1

deprecatedThe 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'.

affects: all

gotchaThe 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.

affects: all

gotchaEvent 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.

affects: all

breakingWhen 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.

affects: all

Errors

Common errors & fixes

Cannot read property 'x' of null

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

fix

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

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

Component not registered via Vue.use(VueContextMenu).

fix

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

TypeError: _default is not a function

Using named import instead of default import.

fix

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

Upgrade

Version history

1.5.11latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

packagehttps://www.npmjs.com/package/vue-contextmenu ↗