Simple Beautiful Context Menu Component For Vue 3

Install & Download:

# Yarn
$ yarn add @imengyu/vue3-context-menu
# NPM
$ npm i @imengyu/vue3-context-menu

Description:

A simple, lightweight, beautiful, customizable context menu component for Vue 3. Light mode and Dark mode are included.

Basic usage:

1. Import and register the context menu component.

import ContextMenu from '@imengyu/vue3-context-menu'
// stylesheet
import '@imengyu/vue3-context-menu/lib/vue3-context-menu.css'

createApp(App)
  .use(ContextMenu)

2. Add events to the target element where the context menu should appear when you right-click the page.

<div class="element" @contextmenu="onContextMenu($event)">
  ...
</div>

3. Enable the context menu and add your own menu items as follows:

onContextMenu(e : MouseEvent) {
  // prevent the browser's default menu
  e.preventDefault();
  // show the context menu
  this.$contextmenu({
    x: e.x,
    y: e.y,
    items: [
      { 
        label: "A menu item", 
        onClick: () => {
          alert("You clicked a menu item");
        }
      },
      { 
        label: "A submenu", 
        children: [
          { label: "Item 1" },
          { label: "Item 2" },
          { label: "Item 3" },
        ]
      },
    ]
  });
}