{"id":17270533,"url":"https://github.com/deckdom/vue-overlay-host","last_synced_at":"2025-10-26T07:33:14.883Z","repository":{"id":143666396,"uuid":"118822868","full_name":"deckdom/vue-overlay-host","owner":"deckdom","description":"Management Component for easy overlay-component injection","archived":false,"fork":false,"pushed_at":"2019-03-29T12:50:12.000Z","size":2625,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-01-31T13:23:15.834Z","etag":null,"topics":["component","management","overlay","vue","vue-overlay","vuejs2","vuex"],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/deckdom.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-01-24T21:13:37.000Z","updated_at":"2018-09-30T19:43:05.000Z","dependencies_parsed_at":null,"dependency_job_id":"9bc72a92-60f3-4d6c-bdf9-058e0918fa22","html_url":"https://github.com/deckdom/vue-overlay-host","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deckdom%2Fvue-overlay-host","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deckdom%2Fvue-overlay-host/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deckdom%2Fvue-overlay-host/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deckdom%2Fvue-overlay-host/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/deckdom","download_url":"https://codeload.github.com/deckdom/vue-overlay-host/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245650484,"owners_count":20650105,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","management","overlay","vue","vue-overlay","vuejs2","vuex"],"created_at":"2024-10-15T08:19:50.177Z","updated_at":"2025-10-26T07:33:09.839Z","avatar_url":"https://github.com/deckdom.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Travis](https://img.shields.io/travis/sinexist/vue-overlay-host.svg?style=flat-square)](https://travis-ci.org/SiNEXiST/vue-overlay-host)\n[![npm](https://img.shields.io/npm/v/vue-overlay-host.svg?style=flat-square)](https://www.npmjs.com/package/vue-overlay-host)\n[![npm Donwloads](https://img.shields.io/npm/dm/vue-overlay-host.svg?style=flat-square)](https://www.npmjs.com/package/vue-overlay-host)\n[![License](https://img.shields.io/github/license/sinexist/vue-overlay-host.svg?style=flat-square)](https://github.com/SiNEXiST/vue-overlay-host/blob/master/LICENSE)\n\n# Vue-Overlay-Host\n\n## About\n\nThe 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.\n\n## Installation\n\nInstall the Overlay-Host via a package manager of your choice\n\n```sh\n# Add the dependency with your package manager\nyarn add vue-overlay-host\nnpm i vue-overlay-host\n```\n\n---\n\nThen register the Component and the Vuex-Store Plugin. This is an example with a basic setup\n\n`main.js`\n```js\nimport { OverlayHost, OverlayHostPlugin } from 'vue-overlay-host';\n\n// Register the Overlay-Host Component globally\nVue.component('overlay-host', OverlayHost);\n\n// Register the Plugin to the Store when you initialize it\nconst store = new Vuex.Store({\n    plugins: [OverlayHostPlugin],\n});\n```\n\n`App.vue`\n```html\n\u003ctemplate\u003e\n    \u003cdiv\u003e\n        \u003cdiv class=\"your-app-content\"\u003e\u003c/div\u003e\n        \u003coverlay-host /\u003e\n    \u003c/div\u003e\n\u003c/template\u003e\n```\n\n`SampleComponent.vue`\n```html\n\u003ctemplate\u003e\n    \u003cbutton v-on:click=\"openSomething()\"\u003e\u003c/button\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n    methods: {\n        openSomething() {\n            this.$store.dispatch('vue-overlay-host/open', {\n                component: 'my-modal',\n                overlay: {\n                    show: true,\n                    closeOnClick: true,\n                },\n                closeOnEscape: true,\n            })\n            .then(hosted =\u003e {\n                console.log('modal opened!');\n                return hosted.promise;\n            })\n            .then(() =\u003e console.log('modal closed!'));\n        }\n    }\n}\n\u003c/script\u003e\n```\n\n## Example\n\nThe hosted vesion can be seen on [the github.io Page!](https://sinexist.github.io/vue-overlay-host/)\n\nFor the build of it or to test it locally,\nsee the `src/main.js`, `src/App.vue` and `src/components/example.vue` Files for more info.\n\nStart up the Example-App by cloning the repo and then:\n\n```sh\n# Install the dependencies with your package manager\nnpm install\nyarn install\n\n# Run the serve command to start the local dev server\nnpm run serve\nyarn serve\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeckdom%2Fvue-overlay-host","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdeckdom%2Fvue-overlay-host","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeckdom%2Fvue-overlay-host/lists"}