vue-right-click-menu 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 menu is lightweight with its only dependency being vue-clickaway. The menu has some basic styles applied to it, but they can be easily
overridden by your own styles.
The menu disappears when you expect by utilizing vue-clickaway and it also optionally disappears when clicked on.
The following instructions will help you get the vue-context menu up and running on your project.
Using npm:
npm i vue-right-click-menuImport 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">
<li>
<a href="#" @click.prevent="onClick($event.target.innerText)">Option 1</a>
</li>
<li>
<a href="#" @click.prevent="onClick($event.target.innerText)">Option 2</a>
</li>
</vue-context>
</div>Notice: As of version 4.1.0, the menu styles are not automatically included by default anymore. You will need to manually import them now in your own stylesheets.
@import '~vue-context/dist/css/vue-context.css';
// Or
@import '~vue-context/src/sass/vue-context';For full documentation, go here: TBD
If you would like to contribute to the documentation, you can edit the docs found here: https://github.com/rawilk/vue-context/tree/master/docs
This project exists thanks to all the people who contribute. [Contribute].
See awesome-vue for other alternatives.
vue-context uses the MIT License (MIT). Please see the license file for more information.