Custom Context Menu For Vue 3

Install & Download:

# Yarn
$ yarn add v-contextmenu
# NPM
$ npm i v-contextmenu

Description:

A lightweight, dynamic, themeable, multi-level, custom context menu component for Vue 3 applications.

How to use it:

1. Import the context menu component and a theme CSS of your choice.

// globally
import contextmenu from "v-contextmenu";
import "v-contextmenu/dist/themes/default.css";
import "v-contextmenu/dist/themes/bright.css";
import "v-contextmenu/dist/themes/dark.css";
Vue.use(contextmenu);
// locally
import { directive, Contextmenu, ContextmenuItem } from "v-contextmenu";
import "v-contextmenu/dist/themes/default.css";
import "v-contextmenu/dist/themes/bright.css";
import "v-contextmenu/dist/themes/dark.css";
export default {
directives: {
contextmenu: directive,
},
components: {
[Contextmenu.name]: Contextmenu,
[ContextmenuItem.name]: ContextmenuItem,
}
}

2. Add a basic context menu to your app.

<template>
  <div
    v-contextmenu:contextmenu
    class="wrapper"
  >
    <code>Right Click Me</code>
  </div>
  <v-contextmenu ref="contextmenu">
    <v-contextmenu-item>
      Menu 1
    </v-contextmenu-item>
    <v-contextmenu-item>
      Menu 2
    </v-contextmenu-item>
    <v-contextmenu-divider />
    <v-contextmenu-submenu title="Menu 3">
      <v-contextmenu-item>Menu 3-1</v-contextmenu-item>
      <v-contextmenu-submenu title="Menu 3-2">
        <v-contextmenu-item>Menu 3-2-1</v-contextmenu-item>
        <v-contextmenu-item>Menu 3-2-2</v-contextmenu-item>
      </v-contextmenu-submenu>
      <v-contextmenu-item>Menu 3-3</v-contextmenu-item>
    </v-contextmenu-submenu>
    <v-contextmenu-item disabled>Menu 4</v-contextmenu-item>
    <v-contextmenu-divider />
    <v-contextmenu-item>Menu 5</v-contextmenu-item>
  </v-contextmenu>
</template>

import { defineComponent } from "vue";
const {
  directive,
  version,
  Contextmenu,
  ContextmenuItem,
  ContextmenuDivider,
  ContextmenuSubmenu,
  ContextmenuGroup,
} = VContextmenu;
export default defineComponent({
  name: "ExampleSimple",
  components: {
    [Contextmenu.name]: Contextmenu,
    [ContextmenuItem.name]: ContextmenuItem,
    [ContextmenuDivider.name]: ContextmenuDivider,
    [ContextmenuSubmenu.name]: ContextmenuSubmenu,
    [ContextmenuGroup.name]: ContextmenuGroup,
  },
  directives: {
    contextmenu: directive,
  },
});

3. Available props for the VContextmenu component.

modelValue: {
  type: Boolean,
  default: false,
},
autoAjustPlacement: {
  type: Boolean,
  default: true,
},
disabled: {
  type: Boolean,
  default: false,
},
teleport: {
  type: [String, Object] as PropType<string | Element>,
  default: () => "body",
},

4. Available props for the VContextmenuItem component.

disabled: {
  type: Boolean,
  default: false,
},
hideOnClick: {
  type: Boolean,
  default: true,
},

5. Available props for the VContextmenuSubmenu component.

title: {
  type: String,
  required: true,
},
disabled: {
  type: Boolean,
  default: false,
},

6. Available props for the VContextmenuGroup component.

title: {
  type: String,
  default: undefined,
},
maxWidth: {
  type: [Number, String],
  default: undefined,
},

Preview:

Changelog:

v3.2.0 (02/13/2024)

• some enhancements

v3.1.1 (12/20/2023)

• Bugfixes