Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rawilk/vue-context
A simple vue context menu component.
https://github.com/rawilk/vue-context
context-menu vue vue-context
Last synced: about 2 months ago
JSON representation
A simple vue context menu component.
- Host: GitHub
- URL: https://github.com/rawilk/vue-context
- Owner: rawilk
- License: mit
- Archived: true
- Created: 2017-08-18T01:08:28.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2022-10-04T18:30:34.000Z (almost 2 years ago)
- Last Synced: 2024-05-02T02:50:29.627Z (5 months ago)
- Topics: context-menu, vue, vue-context
- Language: JavaScript
- Homepage: https://randallwilk.dev/docs/vue-context
- Size: 2.93 MB
- Stars: 257
- Watchers: 6
- Forks: 57
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Attention:
I no longer have the ability or interest in maintaining this package since I am not using Vue in any of my projects
anymore, so I am abandoning `vue-context`. If your project depends on vue-context, please feel free to fork and maintain
the package yourself, or use an [alternative context menu package](#alternatives).
# vue-context
[](https://www.npmjs.com/package/vue-context)
[](https://www.npmjs.com/package/vue-context)
[](https://github.com/rawilk/vue-context/issues)
[](https://github.com/rawilk/vue-context/stargazers)
[](https://vuejs.org)
`vue-context` provides a simple yet flexible context menu for Vue. It is styled for the standard `
- ` 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.
## Getting Started
The following instructions will help you get the vue-context menu up and running on
your project.
### Installation
Using npm:
```bash
npm i vue-context
```
## Basic Usage
Import the component and use it in your app.
```js
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.
```html
```
> **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.
```bash
@import '~vue-context/dist/css/vue-context.css';
// Or
@import '~vue-context/src/sass/vue-context';
```
## Documentation
For full documentation, go here: https://randallwilk.dev/docs/vue-context.
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
## Contributors
This project exists thanks to all the people who contribute. [[Contribute]](CONTRIBUTING.md).
- [rawilk](https://github.com/rawilk)
- [wol-soft](https://github.com/wol-soft)
- [nachodd](https://github.com/nachodd)
- [Nberezhnoy](https://github.com/Nberezhnoy)
## Alternatives
- [vue-context-menu](https://github.com/vmaimone/vue-context-menu)
- [@overcoder/vue-context-menu](https://github.com/MicroDroid/vue-context-menu)
See [awesome-vue](https://github.com/vuejs/awesome-vue#context-menu) for other alternatives.
## License
`vue-context` uses the MIT License (MIT). Please see the [license file](https://github.com/rawilk/vue-context/blob/master/LICENSE) for more information.