vue-contextmenujs

1.4.11 verified Sat Apr 25 auth: no javascript maintenance

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.

Common errors

error this.$contextmenu is not a function ↓

cause Vue.use(Contextmenu) not called or called too late.

fix

Ensure Vue.use(Contextmenu) is executed before creating any Vue instance.

error Cannot read property 'destroy' of undefined ↓

cause Trying to call $contextmenu.destroy() before any menu has been shown.

fix

Only call $contextmenu.destroy() after a menu has been displayed, or check existence: if (this.$contextmenu) this.$contextmenu.destroy();

Warnings

gotcha Package is for Vue 2 only. Do not use with Vue 3 or above. ↓

fix Use vue3-contextmenujs or another Vue 3 compatible library.

breaking 'event' property in MenuOptions is required for correct positioning; if omitted, menu may appear at (0,0). ↓

fix Always pass the native 'event' object from @contextmenu handler, or provide explicit 'x' and 'y' coordinates.

deprecated No new updates since 2023. Package is in maintenance mode. ↓

fix Consider migrating to actively maintained alternatives if needed.

Install

npm install vue-contextmenujs

yarn add vue-contextmenujs

pnpm add vue-contextmenujs

Imports

default (Contextmenu)

wrong

const Contextmenu = require('vue-contextmenujs')

correct

import Contextmenu from 'vue-contextmenujs'

Package does not ship TypeScript types.

$contextmenu
wrong
```
this.$contextMenu(options)
```
correct
```
this.$contextmenu(options)
```
Case-sensitive: use camelCase exactly as shown. Only available after Vue.use(Contextmenu).
$contextmenu.destroy
```
this.$contextmenu.destroy()
```
Manually destroy the context menu.

Quickstart

Shows how to install, register the plugin, and create a context menu with nested items, icons, disabled state, and custom styling.

import Vue from 'vue';
import Contextmenu from 'vue-contextmenujs';
Vue.use(Contextmenu);

new Vue({
  el: '#app',
  data: { message: '' },
  methods: {
    onContextmenu(event) {
      this.$contextmenu({
        items: [
          { label: 'Option 1', onClick: () => { this.message = 'Option 1 clicked'; } },
          { label: 'Option 2', disabled: true },
          { label: 'Option 3', divided: true, icon: 'el-icon-star-on' },
          {
            label: 'Submenu',
            children: [
              { label: 'Sub Option 1', onClick: () => { this.message = 'Sub Option 1'; } },
              { label: 'Sub Option 2' }
            ]
          }
        ],
        event,
        customClass: 'my-menu',
        zIndex: 3,
        minWidth: 230
      });
      event.preventDefault();
    }
  }
});