Installation

Installing vue-context is quick and simple. Follow these instructions to have your own context menus in minutes.


Install

Install via npm

npm i vue-context@2.0.1

Usage

Import the component and use it in your app.

import Vue from 'vue';
import vContext from 'vue-context';

new Vue({
    components: {
        vContext
    },

    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>

    <v-context ref="menu">
        <ul>
            <li @click="onClick($event.target.innerText)">Option 1</li>
            <li @click="onClick($event.target.innerText)">Option 2</li>
        </ul>
    </v-context>

</div>


@contextmenu.prevent is the event listener needed to open the context menu. It is using .prevent as a modifier to prevent the default behavior. In this example, it has a ref of menu, which is what $refs.menu is referring to. When each item is clicked on, the text of the item is sent to the onClick method on the Vue instance, which is then shown in an alert.