vue3-context-menu gives Vue 3 apps a right click menu in two modes

Two entry points for the same menu

The feature list is short, and the second item on it is the one that matters: the package provides both component mode and function mode. Everything else in the readme follows from that choice.

In function mode you call the plugin imperatively. A mouse event handler suppresses the browser menu with preventDefault, then calls ContextMenu.showContextMenu with the pointer coordinates and an array of items, and the menu appears at that position. Nothing about the menu is declared in the template, which makes it the right fit for menus that are assembled at runtime, for example from a list of the current selection.

In component mode the menu is markup. You place a context-menu element in the template with a v-model:show binding, hand it an options object, and nest context-menu-item, context-menu-separator and context-menu-group children to describe the structure.

For a codebase that is Vue-first and template-heavy, component mode keeps the menu next to the rest of the UI. For a codebase that manages state in a store or composable, function mode avoids duplicating markup for menus that appear in a dozen places.

Function mode passes coordinates and a plain item array

The function mode example in the readme shows the whole call. The plugin is imported into the component, the browser default is suppressed, and the menu is opened with the event coordinates:

import ContextMenu from '@imengyu/vue3-context-menu'

onContextMenu(e : MouseEvent) {
  //prevent the browser's default menu
  e.preventDefault();
  //show your menu
  ContextMenu.showContextMenu({
    x: e.x,
    y: e.y,
    items: [

The items array is plain data. Each entry has a label and an onClick callback, and a nested menu is expressed with a children array holding further label objects, which is how a submenu appears in the example.

Because the structure is ordinary JavaScript, you can build the array from a computed property or a store getter and pass whatever the item type your application already uses. The trade-off is that the callback style means every action is a function reference, so a large menu defined this way is harder to read as a template and does not get the benefit of component scoped slots.

Component mode declares the menu in the template

The component form puts the structure in markup instead. The readme example shows a context-menu element bound with v-model:show, an options object, and a mixture of items, a separator and nested groups:

<context-menu
  v-model:show="show"
  :options="optionsComponent"
>
  <context-menu-item label="Simple item" @click="onMenuClick(1)" />
  <context-menu-separator /><!--use this to add separator-->
  <context-menu-group label="Menu with child">
    <context-menu-item label="Item1" @click="onMenuClick(2)" />
    <context-menu-item label="Item2" @click="onMenuClick(3)" />

The options object carries the placement and sizing values, in this case zIndex, minWidth, x and y, held in the component data. Groups nest, so a group can contain another group, and the example demonstrates that with a v-for over fifty generated items inside a nested group.

That last detail is a good stress test to look at when you install it, because fifty siblings in a nested group is where a menu implementation tends to expose its overflow and scrolling behaviour. The readme does not describe how the menu behaves when it would extend past the bottom of the viewport, so that is worth checking in your own application.

Eight themes cover the usual desktop metaphors

The package ships eight built-in themes, listed in a table in the readme with a screenshot for each. The default and default dark themes are the plain starting points, flat and flat dark remove the depth, win10 and win10 dark imitate the Windows 10 style, and mac and mac dark imitate the macOS style.

Each theme therefore has a light and a dark variant, which matters for applications that follow the operating system appearance. The themes are described as built-in rather than as a styling API, so the question for an application with a house style is whether the CSS can be overridden, and the readme does not answer that directly. The documentation site is the place to look, since the readme covers installation and usage but stops at the theme list.

The feature list also claims the component is customizable, but it does not say what is customizable, so treat that as a pointer to the documentation rather than as a description of a theming API.

Installing the package and registering the plugin

The package is published to npm under a scoped name. Installation is one command:

npm install -save @imengyu/vue3-context-menu

After that you import the stylesheet and register the plugin on the app. The readme shows the import in the main.ts file:

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

createApp(App).use(ContextMenu)     

Two details are easy to miss. The CSS import is a separate path under the package's lib directory and is not automatic, so a menu that renders unstyled is almost always a missing stylesheet import rather than a theme problem. And the plugin has to be installed on the app instance with use, which is what makes the static ContextMenu.showContextMenu call in function mode available.

The published package version in package.json is 1.5.5, and the files field lists only lib and index.d.ts, so a published install contains the built library and its type declarations and nothing else.

The scripts show how the package is built and documented

The development section of the readme covers working on the component itself rather than consuming it:

git clone [email protected]:imengyu/vue3-context-menu.git
cd vue3-context-menu
npm install
npm run dev # Development serve project
npm run build-demo # Build example project
npm run build-lib # Build library project

The package.json scripts section gives the same picture in more detail. The dev script runs vite serve against the examples directory, build-demo runs vite build on examples, and build-lib runs vite build on library. The documentation site is built separately with vitepress, through docs:dev and docs:build, and the docs folder sits at the top level of the repository.

Two details stand out for a reviewer. There is a typecheck script running vue-tsc with noEmit, and the repository carries an index.d.ts at the top level, with vite-plugin-dts among the build dependencies. The package is therefore built with types in mind rather than shipping untyped JavaScript with an added declaration file afterwards.

The demo application lives under examples/, with its own vite.config.ts, router and views directories, plus a separate single-test.html entry point, which is a useful place to see the component used in isolation.

One runtime dependency and no tagged releases

The dependency list in package.json contains a single runtime package, @imengyu/vue-scroll-rect, at version 0.1.4 or later. The component therefore measures the size and position of the menu against the viewport using that helper rather than implementing the geometry itself, and the size claim in the feature list depends on not bundling a general purpose utility library.

The risk that comes with a single dependency is that it is also a single point of failure, and it is published under the same author as the component, so the two are released together and versioned by the same person. That is a consideration for a production application that prefers to audit every package in its tree.

On releases, the repository has no GitHub releases, so the npm version is the only version marker. The current version field in package.json reads 1.5.5, and a CHANGELOG.MD file sits at the top level. The last push was on 2026-10-22 and the repository is not archived, so the code is being touched, but there is no dated tag series to compare against.

MIT licensing, a docs site and a bilingual readme

The licence is MIT, with the text in the LICENSE file and a link to it from the readme. That is a permissive grant with attribution required and no copyleft obligation on code that uses the component, though your own review of how the package is redistributed inside a product remains a question for your team.

The project publishes three things worth knowing about. The documentation site is at docs.imengyu.top/vue3-context-menu-docs/en/, with the Chinese version linked from the readme, and an online demo is hosted at docs.imengyu.top/vue3-context-menu-demo/. The readme itself exists in English and Simplified Chinese, the Chinese file being README.CN.md at the top level.

A note on scope. The readme closes with a section advertising the author's other projects, including a VSCode-like layout component, a Visual Studio-like dock layout and a data driven form component. That is worth knowing only so you do not expect those components to be part of this package: the published files field contains only lib and index.d.ts, so nothing else is installed with it.

Editorial conclusion

Adopt vue3-context-menu when you are building a Vue 3 application that needs a right click menu in more than one place and you want to keep the menu definition in JavaScript rather than in a template. Skip it if your menu needs to be rendered inside a scroll container with complex collision handling, since the package leans on a single runtime dependency for that and does not document the behaviour. Before installing, read the documentation site at docs.imengyu.top/vue3-context-menu-docs/en/, check that version 1.5.5 in package.json matches the release you want, and look at the examples/views directory for the component mode markup you intend to copy.

Frequently asked questions

Official sources

1. imengyu/vue3-context-menu on GitHub
2. Issues
3. License: MIT
4. Project website
5. README