{"id":15601812,"url":"https://github.com/codebender828/popper-vue","last_synced_at":"2025-03-19T22:30:26.464Z","repository":{"id":44279100,"uuid":"231194982","full_name":"codebender828/popper-vue","owner":"codebender828","description":"🎊 A lightweight Popper utility component for Vue.js","archived":false,"fork":false,"pushed_at":"2023-01-05T03:59:27.000Z","size":317,"stargazers_count":10,"open_issues_count":16,"forks_count":5,"subscribers_count":0,"default_branch":"master","last_synced_at":"2024-05-01T15:21:16.776Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codebender828.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-01-01T09:03:35.000Z","updated_at":"2023-03-29T13:39:01.000Z","dependencies_parsed_at":"2023-02-03T10:02:04.136Z","dependency_job_id":null,"html_url":"https://github.com/codebender828/popper-vue","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codebender828%2Fpopper-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codebender828%2Fpopper-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codebender828%2Fpopper-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codebender828%2Fpopper-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codebender828","download_url":"https://codeload.github.com/codebender828/popper-vue/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244515576,"owners_count":20464914,"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":[],"created_at":"2024-10-03T02:25:53.308Z","updated_at":"2025-03-19T22:30:26.166Z","avatar_url":"https://github.com/codebender828.png","language":"JavaScript","funding_links":["https://www.buymeacoffee.com/dIlWof6x5"],"categories":[],"sub_categories":[],"readme":"\n\u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n\u003ch1 align=\"center\"\u003e\u003ccode\u003e🎊 popper-vue\u003c/code\u003e\u003c/h1\u003e\n\u003ch4 align=\"center\"\u003eA lightweight bring-your-own-component(BYOC) Popper for Vue.js\u003c/h4\u003e\n\n### 🌟 Features\n`popper-vue` neatly and snugly implements Popper.js into a simple `\u003cPopper\u003e` component that you can use to wrap it's children inside of a popper around an anchor element in your Vue applications.\n- **Render whatever you want:** Utilize the render callback to create entirely custom poppers.\n- **Functional default styles:** Import the provided css for some nice styling defaults or write your own styles.\n- **Portal your poppers anywhere in the DOM:** You can use a portal element to render your popper, or if you want to yet, use direct child.\n\n### [Codesandbox Demo](https://codesandbox.io/s/popper-vue-starter-nipsz)\n\n### ⚡️ Installation\n```bash\n$ npm install popper-vue popper.js\n```\n\u003e Please note that `popper-vue` assumes that you already have Vue.js installed in your application. If you not have Vue installed. Install it by running `npm install vue --save`\n\n#### Global `Popper` registration\nIn your `main.js`:\n```js\nimport { Popper } from 'popper-vue'\nimport 'popper-vue/dist/popper-vue.css'\n\nVue.component('Popper', Popper)\n```\n\n\n#### Local `Popper` import\nIn your templates:\n```html\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cbutton ref=\"anchorEl\" @click=\"showPopper\"\u003eToggle portal\u003c/button\u003e\n    \u003cPopper\n      :is-open=\"show\"\n      :anchor-el=\"$refs.anchorEl\"\n      :on-close=\"hidePopper\"\n    \u003e\n      \u003caside id=\"popper-content\"\u003e\n        I am a Happy Popper 😀\n      \u003c/aside\u003e\n    \u003c/Popper\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"js\"\u003e\nimport { Popper } from 'popper-vue'\nimport 'popper-vue/dist/popper-vue.css'\n\nexport default {\n  name: 'App',\n  components: {\n    Popper\n  },\n  data () {\n    return {\n      show: false\n    }\n  },\n  methods: {\n    showPopper () {\n      this.show = !this.show\n    },\n    hidePopper () {\n      this.show = false\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n### 🏋🏼‍♀️ API\n`popper-vue` provides a few components that allow to render custom popper components.\n\n✅ -  Completed!\n⚠️ -  WIP\n#### 🧤 Props\n| Props         | Description   | Values | Default |\n| :------------- |-------------| ----- | --- |\n| ✅anchorEl      | Anchor element around which popper is positioned | `HTMLElement` |  N/A  |\n| ✅ placement      | Default position where `popperEl` should be placed when Popper is open | `top`, `right`, `bottom`, `left` |  `bottom`  |\n| ✅ modifiers      | Modifier options for `popper.js`. See [popper.js docs]() for more information | `Object` |  `{}`  |\n| ✅ isOpen      | Determines whether the Popper is open or not | `Boolean` |  `false`  |\n| ✅ onClose  | Handler function to be called when the popper is to be closed | `Function` |  `null`  |\n| ✅closeOnClickAway  | Determines whether popper should close when other elements are clicked | `Boolean` |  `true`  |\n| ⚠️ usePortal  | Determines whether popper should mount `popperEl` in portal before positioning it around anchor. | `Boolean` |  `false`  |\n| ✅ hasArrow  | Determines whether popper should possess arrow when shown | `Boolean` |  `true`  |\n\n\n#### 📅 Events\n| Events        | Description   | Payload |\n| ------------- |---------------| ----- |\n| ✅ `popper:create`     | Emitted when `popperEl` is open and has been mounted by `popper.js` | `{ el: popperEl\u003cHTMLElement\u003e }` |\n| ✅ `popper:update`     | Emitted when Popper.js instance undergoes an update | `{ el: HTMLElement }` |\n| ✅ `popper:close`     | Emitted when `popperEl` is closed and has been unmounted by `popper.js` | `{}` |\n\n### ⚠️ Caveats\n- The `popper:close` event is sometimes emitted **twice** when the popper is being closed when the `closeOnClickAway` props is **truthy**. Currently there are no implemented workarounds for this yet, so while using this component make sure to be careful of it. It's also worth pointing out that this may not be that big of a problem for most consumer use cases\n\n### 📚TODO\n - [x] Publish to NPM\n - [ ] Upgrade to `@popperjs/core` support\n - [ ] Finish Popper Portal implementation\n - [ ] Create usePopper utility plugin funciton hook\n - [ ] Docs site\n - [ ] Codesandbox examples\n - [ ] Articles to illustrate how to use `popper-vue` in component library\n - [ ] Type declaration files for plugin\n\n\n\n### 🦑 Contributors\n- [Jonathan Bakebwa](https://twitter.com/codebender828)\n- This could be you :)\n\n#### 🤝 Contributing\nHere's our contribution [guide.](./.github/CONTRIBUTING.md)\n\n#### ❤️ Support this project\nIf you like this project, please consider supporting it by buying my a coffee!\n\n\u003ca style=\"background: #FF813F; color: white; padding: 10px 20px; border-radius: 3px; display: inline-flex;\" target=\"_blank\" href=\"https://www.buymeacoffee.com/dIlWof6x5\"\u003e\n  \u003cimg style=\"margin-right: 10px; height: 20px;\" src=\"https://cdn.buymeacoffee.com/buttons/bmc-new-btn-logo.svg\" alt=\"Buy me a coffee\"\u003e\n  \u003cspan\u003eBuy me a coffee\u003c/span\u003e\n\u003c/a\u003e\n\n\u003ccenter\u003e\n  \u003cbr\u003e\n  Made with ❤️ by \u003ca target=\"_blank\" href=\"https://twitter.com/codebender828\"\u003eJonathan Bakebwa 🇺🇬\u003c/a\u003e\n\u003c/center\u003e\n\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://jbakebwa.dev\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/21237954?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJonathan Bakebwa\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/codebender828/popper-vue/commits?author=codebender828\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://twitter.com/imesutkoca\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/342666?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMesut\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/codebender828/popper-vue/commits?author=koca\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-enable --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodebender828%2Fpopper-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodebender828%2Fpopper-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodebender828%2Fpopper-vue/lists"}