Registry / web-framework / vue-contextmenujs

vue-contextmenujs

library1.4.11jsnpmunverified

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.

web-framework

npm install vue-contextmenujs

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-CONTEXTMENUJS

vue-contextmenujs

web-frameworkjavascriptv1.4.11

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

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

default (Contextmenu)

✓ import Contextmenu from 'vue-contextmenujs'

✗ const Contextmenu = require('vue-contextmenujs')

Package does not ship TypeScript types.

$contextmenu

✓ this.$contextmenu(options)

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

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(); } } });

Debug

Known issues

gotchaPackage is for Vue 2 only. Do not use with Vue 3 or above.

fix

Use vue3-contextmenujs or another Vue 3 compatible library.

affects: >=1.0.0

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.

affects: >=1.0.0

deprecatedNo new updates since 2023. Package is in maintenance mode.

fix

Consider migrating to actively maintained alternatives if needed.

affects: 1.4.11

Errors

Common errors & fixes

this.$contextmenu is not a function

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

fix

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

Cannot read property 'destroy' of undefined

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();

Upgrade

Version history

1.4.11latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

8 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/GitHub-Laziji/menujs ↗

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