Registry / web-framework / vue-context-menu

vue-context-menu

library2.0.6jsnpmunverified

This package, `vue-context-menu`, provides a simple context menu component specifically designed for Vue 2 applications. It allows developers to easily integrate custom right-click menus into their Vue 2 projects, attaching them to specific DOM elements. The latest stable version is 2.0.6, last published in July 2017, indicating that the project is effectively abandoned with no active maintenance or updates. Its release cadence was sporadic and has ceased. Key differentiators at the time were its straightforward API for attaching menus via `v-ref` and handling `contextmenu.prevent` events. However, it lacks features common in modern alternatives like built-in theming, nested menus, or programmatic API options, and is fundamentally incompatible with Vue 3. For new projects or those using Vue 3, alternative context menu libraries are highly recommended.

web-framework

npm install vue-context-menu

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-CONTEXT-MENU

vue-context-menu

web-frameworkjavascriptv2.0.6

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.

contextMenu

✓ import contextMenu from 'vue-context-menu'

✗ const contextMenu = require('vue-context-menu')

This component is designed for Vue 2 applications. While CommonJS `require` might work in older Node environments, ES module imports are standard for modern Vue CLI projects, even those targeting Vue 2.

Component Registration

✓ export default { components: { contextMenu } }

The `contextMenu` component must be explicitly registered in the `components` option of your Vue component to be used in its template.

This example demonstrates how to integrate `vue-context-menu` into a Vue 2 component, preventing the browser's default context menu and opening the custom one.

<template> <div @contextmenu.prevent="$refs.ctxMenu.open"> Right-click me for a context menu! </div> <context-menu id="my-context-menu" ref="ctxMenu"> <li @click="doSomething('Option 1 clicked')">Option 1</li> <li class="disabled">Option 2 (Disabled)</li> <li @click="doSomething('Option 3 clicked')">Option 3</li> </context-menu> </template> <script> import contextMenu from 'vue-context-menu' export default { name: 'ContextMenuDemo', components: { contextMenu }, methods: { doSomething(message) { alert(message) // Optionally close the menu after action this.$refs.ctxMenu.close() } } } </script> <style> /* Basic styling for the context menu for visibility */ #my-context-menu { border: 1px solid #ccc; background: white; box-shadow: 2px 2px 5px rgba(0,0,0,0.2); list-style: none; padding: 5px 0; margin: 0; position: fixed; z-index: 1000; } #my-context-menu li { padding: 8px 15px; cursor: pointer; } #my-context-menu li:hover:not(.disabled) { background-color: #f0f0f0; } #my-context-menu li.disabled { color: #aaa; cursor: not-allowed; } </style>

Debug

Known issues

breakingThis package is strictly for Vue 2.x applications. It is not compatible with Vue 3 and attempting to use it will result in critical errors due to significant API changes between Vue major versions.

fix

For Vue 3 projects, use a dedicated Vue 3 context menu library like `@imengyu/vue3-context-menu` or `vue-simple-context-menu`.

affects: >=2.0.0

gotchaThe package is effectively abandoned, with the last npm publish in July 2017. This means no new features, bug fixes, security updates, or compatibility with newer JavaScript ecosystems (e.g., Vite, modern tooling) should be expected.

fix

Consider migrating to a more actively maintained context menu component, even for Vue 2 projects, to ensure ongoing support and security.

affects: >=2.0.0

breakingVersions prior to 1.x (e.g., 0.0.13) were built for Vue 1.x. Using these older versions with Vue 2.x will cause breakage.

fix

Ensure you install version 1.0.0 or higher for Vue 2.x compatibility. The provided example uses version 2.0.6, which is for Vue 2.x.

affects: <1.0.0

gotchaThe context menu relies on the `@contextmenu.prevent` event modifier. Forgetting this modifier will cause both the custom context menu and the browser's native context menu to appear simultaneously.

fix

Always use `@contextmenu.prevent` on the element that triggers the context menu, as shown in the quickstart example.

affects: >=2.0.0

Errors

Common errors & fixes

Failed to resolve component: context-menu

The `contextMenu` component was imported but not registered in the Vue component's `components` option, or there's a typo in the component name.

fix

Ensure `import contextMenu from 'vue-context-menu'` is present and `components: { contextMenu }` is correctly defined in your Vue component's script section.

TypeError: Cannot read properties of undefined (reading 'open')

The `$refs.ctxMenu` might not be available at the time `$refs.ctxMenu.open()` is called, typically because the component isn't mounted yet or the `ref` attribute on `context-menu` is misspelled or missing.

fix

Verify that `ref="ctxMenu"` is correctly assigned to the `<context-menu>` element and that the component is fully mounted before attempting to access it via `$refs`.

Upgrade

Version history

2.0.6latest on npm

Audit

Dependencies

vuerequiredPeer dependency for the Vue.js framework, specifically Vue 2.x.

Agent activity

5 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/vmaimone/vue-context-menu ↗

packagehttps://www.npmjs.com/package/vue-context-menu ↗