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


Install via npm

npm i vue-context


Import the component and use it in your app.

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

new Vue({
    components: {

    methods: {
        onClick (text) {
            alert(`You clicked ${text}!`);

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">

        <p @contextmenu.prevent="$">
            Right click on me

    <vue-context ref="menu">
            <li @click="onClick($">Option 1</li>
            <li @click="onClick($">Option 2</li>


@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 $ 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.