ContextMenu component for Vue 3

v-contextmenu@next

ContextMenu component for Vue 3.0.

Installation

NPM (Recommend)

$ npm i -S v-contextmenu@next # yarn add v-contextmenu@next

CDN

Get the latest version from unpkg.com/v-contextmenu, and then import JavaScript and CSS file in your page.

<!-- import Vue -->
<script src="https://unpkg.com/vue@next"></script>

<!-- import VContextmenu component -->
<script src="https://unpkg.com/v-contextmenu@next/dist/index.js"></script>

<!-- import VContextmenu styles -->
<link
  rel="stylesheet"
  href="https://unpkg.com/v-contextmenu@next/dist/themes/default.css"
/>

// global
Vue.use(window.contextmenu);

// or as needed
const { directive, Contextmenu, ContextmenuItem } = window.contextmenu;

export default {
  directives: {
    contextmenu: directive,
  },

  components: {
    [Contextmenu.name]: Contextmenu,
    [ContextmenuItem.name]: ContextmenuItem,
  },
};

? Usage

Global register

import contextmenu from "v-contextmenu";
import "v-contextmenu/dist/themes/default.css";

Vue.use(contextmenu);

<template>
  <v-contextmenu ref="contextmenu">
    <v-contextmenu-item>Menu Item 1</v-contextmenu-item>
    <v-contextmenu-item>Menu Item 2</v-contextmenu-item>
    <v-contextmenu-item>Menu Item 3</v-contextmenu-item>
  </v-contextmenu>

  <div v-contextmenu:contextmenu>right click here</div>
</template>

Register as needed

<template>
  <v-contextmenu ref="contextmenu">
    <v-contextmenu-item>Menu Item 1</v-contextmenu-item>
    <v-contextmenu-item>Menu Item 2</v-contextmenu-item>
    <v-contextmenu-item>Menu Item 3</v-contextmenu-item>
  </v-contextmenu>

  <div v-contextmenu:contextmenu>right click here</div>
</template>

<script>
import { directive, Contextmenu, ContextmenuItem } from "v-contextmenu";
import "v-contextmenu/dist/themes/default.css";

export default {
  directives: {
    contextmenu: directive,
  },

  components: {
    [Contextmenu.name]: Contextmenu,
    [ContextmenuItem.name]: ContextmenuItem,
  }
}
</script>

? Develop

$ npm install # install dependencies
$ npm run dev # start dev server

? Build

$ npm run build # Build for npm
$ npm run build:site # Build for site