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';

// Or import using the named export
// import { VueContext } from 'vue-context';

new Vue({
    components: {

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

For styling, you will need to import the components styles into your own stylesheets, or into your javascript. It's recommended to import into a stylesheet, however. If you're using sass, you can do the following:

@import  '~vue-context/src/sass/vue-context';

// Or
// @import  '~vue-context/dist/css/vue-context.css';

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 @click.prevent="onClick($">Option 1</a>
            <a @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.