Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

vue context menu

Related course:
Fullstack Vue: The Complete Guide to Vue.js

This component lets you create a new context menu (vue context-menu component).

If you right click on a component, the context menu can show up. This can be any HTML component and it replaces the traditional right click menu.

As shown below:

context menu

Example Usage
An example below:

<div @contextmenu.prevent="$refs.ctxMenu.open">

<context-menu id="context-menu" ref="ctxMenu">
<li @click="doSomething(...)">option 1</li>
<li class="disabled">option 2</li>
<li>option 3</li>

import contextMenu from 'vue-context-menu'
export default {
name: 'my-component',
components: { contextMenu },
methods: { doSomething }

Build Setup
To install, type these commands:

# install dependencies
npm install

# compiles src/*.vue and builds a bundle for static linking
npm run build

# runs Karma with test/*.js
npm run test

# runs webpack-dev-server
npm run dev

Vue 1.x Support

Haven’t migrated to Vue 2.x yet?

npm install vue-context-menu@0.0.13`

Github: http://github.com/vmaimone/vue-context-menu#readme

© vuejsexamples.net - Privacy Policy - Cookie Policy