{"id":25941823,"url":"https://github.com/megaarmos/vue-spring-bottom-sheet","last_synced_at":"2026-04-02T11:23:12.415Z","repository":{"id":269774832,"uuid":"902002305","full_name":"megaarmos/vue-spring-bottom-sheet","owner":"megaarmos","description":"😎 Modern and 🚀 Performant Bottom Sheet for Vue.js","archived":false,"fork":false,"pushed_at":"2026-03-23T23:46:31.000Z","size":1178,"stargazers_count":139,"open_issues_count":2,"forks_count":14,"subscribers_count":2,"default_branch":"master","last_synced_at":"2026-03-24T22:41:31.637Z","etag":null,"topics":["animation","bottom-sheet","bottomsheet","dialog","draggableview","drawer","gesture-control","modal","overlay","popup","sheet","ux","vue","vueuse-gesture","vueuse-motion"],"latest_commit_sha":null,"homepage":"https://vue-spring-bottom-sheet-playground.vercel.app","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/megaarmos.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-12-11T18:02:11.000Z","updated_at":"2026-03-23T23:46:33.000Z","dependencies_parsed_at":"2024-12-26T04:27:23.909Z","dependency_job_id":"3cbcd825-4080-4d44-8373-efee45318aee","html_url":"https://github.com/megaarmos/vue-spring-bottom-sheet","commit_stats":null,"previous_names":["megaarmos/vue-spring-bottom-sheet"],"tags_count":46,"template":false,"template_full_name":null,"purl":"pkg:github/megaarmos/vue-spring-bottom-sheet","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/megaarmos%2Fvue-spring-bottom-sheet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/megaarmos%2Fvue-spring-bottom-sheet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/megaarmos%2Fvue-spring-bottom-sheet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/megaarmos%2Fvue-spring-bottom-sheet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/megaarmos","download_url":"https://codeload.github.com/megaarmos/vue-spring-bottom-sheet/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/megaarmos%2Fvue-spring-bottom-sheet/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31305299,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-02T09:48:21.550Z","status":"ssl_error","status_checked_at":"2026-04-02T09:48:19.196Z","response_time":89,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["animation","bottom-sheet","bottomsheet","dialog","draggableview","drawer","gesture-control","modal","overlay","popup","sheet","ux","vue","vueuse-gesture","vueuse-motion"],"created_at":"2025-03-04T06:15:42.160Z","updated_at":"2026-04-02T11:23:12.410Z","avatar_url":"https://github.com/megaarmos.png","language":"Vue","funding_links":[],"categories":["Vue"],"sub_categories":[],"readme":"# Vue Spring Bottom Sheet\n\n😎 **Modern** and 🚀 **Performant** Bottom Sheet for Vue.js\n\n[Demo](https://vue-spring-bottom-sheet.douxcode.com/) 👀\n\n| ![](https://vue-spring-bottom-sheet.douxcode.com/example_basic.png) | ![](https://vue-spring-bottom-sheet.douxcode.com/example_snap.png) | ![](https://vue-spring-bottom-sheet.douxcode.com/example_blocking.png) | ![](https://vue-spring-bottom-sheet.douxcode.com/example_sticky.png) |\n| :-----------------------------------------------------------------: | :----------------------------------------------------------------: | :--------------------------------------------------------------------: | :------------------------------------------------------------------: |\n\n# Installation\n\n```\nnpm install @douxcode/vue-spring-bottom-sheet\n```\n\n```\nbun install @douxcode/vue-spring-bottom-sheet\n```\n\n# Getting started\n\n## Basic usage\n\n```vue\n\u003cscript setup\u003e\nimport BottomSheet from '@douxcode/vue-spring-bottom-sheet'\nimport '@douxcode/vue-spring-bottom-sheet/dist/style.css'\nimport { useTemplateRef } from 'vue'\n\nconst bottomSheet = useTemplateRef('bottomSheet')\n\nconst open = () =\u003e {\n  bottomSheet.value.open()\n}\n\nconst close = () =\u003e {\n  bottomSheet.value.close()\n}\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cBottomSheet ref=\"bottomSheet\"\u003e Your awesome content \u003c/BottomSheet\u003e\n\u003c/template\u003e\n```\n\n## Basic usage `setup` + TS\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport BottomSheet from '@douxcode/vue-spring-bottom-sheet'\nimport '@douxcode/vue-spring-bottom-sheet/dist/style.css'\nimport { ref } from 'vue'\n\nconst bottomSheet = ref\u003cInstanceType\u003ctypeof BottomSheet\u003e\u003e()\n\n/* For vue 3.5+ you can use useTemplateRef() */\nconst bottomSheet = useTemplateRef('bottomSheet')\n\nconst open = () =\u003e {\n  bottomSheet.value.open()\n}\n\nconst close = () =\u003e {\n  bottomSheet.value.close()\n}\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cBottomSheet ref=\"bottomSheet\"\u003e Your content \u003c/BottomSheet\u003e\n\u003c/template\u003e\n```\n\n## Usage with v-model\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { ref } from 'vue'\n\nimport BottomSheet from '@douxcode/vue-spring-bottom-sheet'\nimport '@douxcode/vue-spring-bottom-sheet/dist/style.css'\n\nconst sheet = ref(false)\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cbutton type=\"button\" @click=\"sheet = true\"\u003eOpen bottom sheet\u003c/button\u003e\n  \u003cBottomSheet v-model=\"sheet\"\u003e Your content \u003c/BottomSheet\u003e\n\u003c/template\u003e\n```\n\n## Usage in Nuxt 3\n\nFor Nuxt 3, just wrap component in `\u003cClientOnly\u003e`\n\n```vue\n\u003ctemplate\u003e\n  \u003cClientOnly\u003e\n    \u003cBottomSheet ref=\"bottomSheet\"\u003e Your awesome content \u003c/BottomSheet\u003e\n  \u003c/ClientOnly\u003e\n\u003c/template\u003e\n```\n\n## Slots\n\n```vue\n\u003ctemplate\u003e\n  \u003cBottomSheet ref=\"bottomSheet\"\u003e\n    \u003ctemplate #header\u003e Header \u003c/template\u003e\n    \u003cdiv\u003eYour content\u003c/div\u003e\n    \u003ctemplate #footer\u003e Footer \u003c/template\u003e\n  \u003c/BottomSheet\u003e\n\u003c/template\u003e\n```\n\n## CSS Custom Properties\n\n```css\n--vsbs-backdrop-bg: rgba(0, 0, 0, 0.5);\n--vsbs-shadow-color: rgba(89, 89, 89, 0.2);\n--vsbs-background: #fff;\n--vsbs-border-radius: 16px;\n--vsbs-outer-border-color: transparent;\n--vsbs-max-width: 640px;\n--vsbs-border-color: rgba(46, 59, 66, 0.125);\n--vsbs-padding-x: 16px;\n--vsbs-handle-background: rgba(0, 0, 0, 0.28);\n```\n\n## Props\n\n### Prop Definitions\n\n| Prop                | Type                        | Default          | Description                                                               |\n| ------------------- | --------------------------- | ---------------- | ------------------------------------------------------------------------- |\n| duration            | Number                      | 250              | Animation duration in milliseconds                                        |\n| snapPoints          | Array\u003cnumber\\|`${number}%`\u003e | [instinctHeight] | Custom snapping positions                                                 |\n| initialSnapPoint    | Number                      | minHeight        | Initial snap point index                                                  |\n| blocking            | Boolean                     | true             | Block interactions with underlying content                                |\n| canSwipeClose       | Boolean                     | true             | Enable swipe-to-close gesture                                             |\n| swipeCloseThreshold | Number\\|`${number}%`        | \"50%\"            | The amount of translation (in px or %) after which the element will close |\n| canBackdropClose    | Boolean                     | true             | Allow closing by tapping backdrop                                         |\n| expandOnContentDrag | Boolean                     | true             | Enable expanding by dragging content                                      |\n| teleportTo          | String \\| RendererElement   | body             | Teleport to a specific element                                            |\n| teleportDefer       | Boolean                     | false            | Defer teleporting until opened (Vue 3.5+ only)                            |\n| headerClass         | String                      | ''               | Set header element class                                                  |\n| contentClass        | String                      | ''               | Set content element class                                                 |\n| footerClass         | String                      | ''               | Set footer element class                                                  |\n| forceMount          | Boolean                     | false            | Force mount the bottom sheet in the DOM                                   |\n\nInteractive content inside the sheet body keeps its native touch behavior. Inputs and editable content do not start sheet dragging, and custom widgets can opt out with data-vsbs-no-drag.\n\n## Exposed methods\n\nAssuming there is `const bottomSheet = ref()`\n\n| Method      | Description                     | Example                            |\n| ----------- | ------------------------------- | ---------------------------------- |\n| open        | Opens the bottom sheet          | `bottomSheet.value.open()`         |\n| close       | Closes the bottom sheet         | `bottomSheet.value.close()`        |\n| snapToPoint | Snaps to an index of snapPoints | `bottomSheet.value.snapToPoint(1)` |\n\n## Events\n\n| Event           | Description                            | Payload                 |\n| --------------- | -------------------------------------- | ----------------------- |\n| opened          | Emitted when sheet finishes opening    | -                       |\n| opening-started | Emitted when sheet starts opening      | -                       |\n| closed          | Emitted when sheet finishes closing    | -                       |\n| closing-started | Emitted when sheet starts closing      | -                       |\n| dragging-up     | Emitted when user drags sheet upward   | -                       |\n| dragging-down   | Emitted when user drags sheet downward | -                       |\n| instinctHeight  | Emitted when content height changes    | height (number)         |\n| snapped         | Emitted when sheet finishes snapping   | snapPointIndex (number) |\n\n## Acknowledgments\n\nThis project was inspired by the following:\n\n- [react-spring-bottom-sheet]: Accessible ♿️, Delightful ✨, \u0026 Fast 🚀\n- [@webzlodimir/vue-bottom-sheet]: 🔥 A nice clean and touch-friendly bottom sheet component based on Vue.js and Hammer.js for Vue 3\n\n[react-spring-bottom-sheet]: https://react-spring.bottom.sheet.dev/\n[@webzlodimir/vue-bottom-sheet]: https://github.com/vaban-ru/vue-bottom-sheet\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmegaarmos%2Fvue-spring-bottom-sheet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmegaarmos%2Fvue-spring-bottom-sheet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmegaarmos%2Fvue-spring-bottom-sheet/lists"}