Simple Beautiful Context Menu Component For Vue 3

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" },
        ]
      },
    ]
  });
}

Preview:

Changelog:

v1.2.10 (05/25/2023)

• Bugfixes

v1.2.9 (05/21/2023)

• Bugfixes

v1.2.6 (04/30/2023)

• Theme modify

v1.2.5 (04/15/2023)

• Bugfixes

v1.2.4 (04/09/2023)

• Bugfixes

v1.2.3 (02/14/2023)

• Bugfix

Download Details:

Author: imengyu

Live Demo: https://imengyu.top/pages/vue3-context-menu-demo/#/

Download Link: https://github.com/imengyu/vue3-context-menu/archive/refs/heads/main.zip

Official Website: https://github.com/imengyu/vue3-context-menu

Install & Download:

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

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