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@4.0.3


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">
            <a href="/docs/4.0/installation#" @click.prevent="onClick($">Option 1</a>
            <a href="/docs/4.0/installation#" @click.prevent="onClick($">Option 2</a>


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

{info} Tip: The context menu defaults to a <ul> tag. For best results, make each menu item an <a> tag wrapped inside of an <li> tag.