Vue 2 Context Menu Component

2.0.6 · abandoned · verified Sun Apr 19

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.

Common errors

```
Failed to resolve component: context-menu
```
cause 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')
```
cause 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`.

Warnings

breaking This 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`.
gotcha The 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.
breaking Versions 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.
gotcha The 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.

Install

npm install vue-context-menu npm
yarn add vue-context-menu yarn
pnpm add vue-context-menu pnpm

Imports

contextMenu
wrong:
```
const contextMenu = require('vue-context-menu')
```
correct:
```
import contextMenu from '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.

Quickstart

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>

view raw JSON →