vue-context provides a simple yet flexible context menu for Vue. It is styled for the standard <ul> tag, but any menu template can be used. The only dependencies the menu has are Vue and vue-clickaway, so the majority of styling is up to you, and any of the package styles for the menu can easily be overridden.

The menu disappears when you expect by utilizing vue-clickaway and it also optionally disappears when clicked on.

Note

The API has changed. Check v2.0.1 documentation if you use the old version.

Getting Started

The following instructions will help you get the vue-context menu up and running on your project.

Installation

Using npm:

npm i vue-context

Basic Usage

Import the component and use it in your app.

import Vue from 'vue';
import { VueContext } from 'vue-context';

new Vue({
    components: {
        VueContext
    },
    
    methods: {
        onClick (text) {
            alert(`You clicked ${text}!`);
        }
    }
}).$mount('#app');

Next add an element to the page that will trigger the context menu to appear, and also add the context menu to the page.

<div id="app">

    <div>
        <p @contextmenu.prevent="$refs.menu.open">
            Right click on me
        </p>    
    </div>
    
    <vue-context ref="menu">
        <ul>
            <li @click="onClick($event.target.innerText)">Option 1</li>
            <li @click="onClick($event.target.innerText)">Option 2</li>
        </ul>
    </vue-context>
    
</div>

Documentation/Demo

For full documentation and demos, go here: https://vue-context.randallwilk.com/docs

License

vue-context uses the MIT License (MIT). Please see the license file for more information.