https://github.com/deckdom/vue-overlay-host
Management Component for easy overlay-component injection
https://github.com/deckdom/vue-overlay-host
component management overlay vue vue-overlay vuejs2 vuex
Last synced: 8 months ago
JSON representation
Management Component for easy overlay-component injection
- Host: GitHub
- URL: https://github.com/deckdom/vue-overlay-host
- Owner: deckdom
- License: mit
- Created: 2018-01-24T21:13:37.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2019-03-29T12:50:12.000Z (over 7 years ago)
- Last Synced: 2025-01-31T13:23:15.834Z (over 1 year ago)
- Topics: component, management, overlay, vue, vue-overlay, vuejs2, vuex
- Language: Vue
- Size: 2.5 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://travis-ci.org/SiNEXiST/vue-overlay-host)
[](https://www.npmjs.com/package/vue-overlay-host)
[](https://www.npmjs.com/package/vue-overlay-host)
[](https://github.com/SiNEXiST/vue-overlay-host/blob/master/LICENSE)
# Vue-Overlay-Host
## About
The Overlay-Host allows you to easily inject your custom Overlay-Components and manage those. It's simple and efficient and isn't hard to install nor to use.
## Installation
Install the Overlay-Host via a package manager of your choice
```sh
# Add the dependency with your package manager
yarn add vue-overlay-host
npm i vue-overlay-host
```
---
Then register the Component and the Vuex-Store Plugin. This is an example with a basic setup
`main.js`
```js
import { OverlayHost, OverlayHostPlugin } from 'vue-overlay-host';
// Register the Overlay-Host Component globally
Vue.component('overlay-host', OverlayHost);
// Register the Plugin to the Store when you initialize it
const store = new Vuex.Store({
plugins: [OverlayHostPlugin],
});
```
`App.vue`
```html
```
`SampleComponent.vue`
```html
export default {
methods: {
openSomething() {
this.$store.dispatch('vue-overlay-host/open', {
component: 'my-modal',
overlay: {
show: true,
closeOnClick: true,
},
closeOnEscape: true,
})
.then(hosted => {
console.log('modal opened!');
return hosted.promise;
})
.then(() => console.log('modal closed!'));
}
}
}
```
## Example
The hosted vesion can be seen on [the github.io Page!](https://sinexist.github.io/vue-overlay-host/)
For the build of it or to test it locally,
see the `src/main.js`, `src/App.vue` and `src/components/example.vue` Files for more info.
Start up the Example-App by cloning the repo and then:
```sh
# Install the dependencies with your package manager
npm install
yarn install
# Run the serve command to start the local dev server
npm run serve
yarn serve
```