Simple Context Menu Component For Vue.js

Install & Download:

# Yarn
$ yarn add vue-simple-context-menu
# NPM
$ npm install vue-simple-context-menu --save

Description:

Simple context-menu component built for Vue. Works well with both left and right clicks. Nothing too fancy, just works and is simple to use.

How to use it:

1. Import and register the context menu.

import { createApp } from 'vue';
import VueSimpleContextMenu from 'vue-simple-context-menu';
import 'vue-simple-context-menu/dist/vue-simple-context-menu.css';
const app = createApp(App);
app.component('vue-simple-context-menu', VueSimpleContextMenu);

2. Bind the context menu to an element.

<div class="item-wrapper">
  <div
    v-for="item in items"
    @click.prevent.stop="handleClick($event, item)"
    class="item-wrapper__item"
  >
    {{item.name}}
  </div>
</div>
<vue-simple-context-menu
  element-id="myUniqueId"
  :options="options"
  ref="vueSimpleContextMenu"
  @option-clicked="optionClicked"
/>

handleClick (event, item) {
  this.$refs.vueSimpleContextMenu.showMenu(event, item)
}
optionClicked (event) {
  window.alert(JSON.stringify(event))
}

Preview:

Changelog:

v4.0.4 (05/17/2022)

• Update demo build

v4.0.1 (03/20/2022)

• Upgrade package to support Vue 3. Vue 2 support can be found at v3.4.2.