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:

Simple Beautiful Context Menu Component For Vue 3

Changelog:

v1.4.0 (04/10/2024)

  • Update

v1.3.9 (03/16/2024)

  • Bugfix

v1.3.8 (02/03/2024)

  • Bugfix

v1.3.6 (01//17/2024)

  • Add isClosed instance function to check if the menu is currently closed.

v1.3.3 (07/22/2023)

  • Add last click item in onClose callback

v1.3.2 (07/12/2023)

  • Bugfix

v1.3.1 (07/11/2023)

  • Add divider direction

v1.3.0 (06/20/2023)

  • Bugfixes

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

Add Comment