{"id":13810568,"url":"https://github.com/headmandev/vue3-side-panel","last_synced_at":"2025-05-14T10:34:11.540Z","repository":{"id":39904026,"uuid":"458188177","full_name":"headmandev/vue3-side-panel","owner":"headmandev","description":"Easy to use and flexible modal sidebar component for Vue3","archived":false,"fork":false,"pushed_at":"2023-11-11T00:26:59.000Z","size":781,"stargazers_count":61,"open_issues_count":1,"forks_count":6,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-12T16:57:51.330Z","etag":null,"topics":["modal","sidebar-component","vue3"],"latest_commit_sha":null,"homepage":"https://vue3-side-panel.netlify.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/headmandev.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}},"created_at":"2022-02-11T13:00:15.000Z","updated_at":"2025-03-19T05:24:39.000Z","dependencies_parsed_at":"2024-01-02T23:29:10.470Z","dependency_job_id":"2f50a6a2-33dc-4952-835a-2839c4b76835","html_url":"https://github.com/headmandev/vue3-side-panel","commit_stats":{"total_commits":15,"total_committers":1,"mean_commits":15.0,"dds":0.0,"last_synced_commit":"3a052ad495dbae4b65d1a470ddcc4230440e3f65"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/headmandev%2Fvue3-side-panel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/headmandev%2Fvue3-side-panel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/headmandev%2Fvue3-side-panel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/headmandev%2Fvue3-side-panel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/headmandev","download_url":"https://codeload.github.com/headmandev/vue3-side-panel/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254121267,"owners_count":22018134,"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":["modal","sidebar-component","vue3"],"created_at":"2024-08-04T02:01:00.681Z","updated_at":"2025-05-14T10:34:06.484Z","avatar_url":"https://github.com/headmandev.png","language":"Vue","funding_links":[],"categories":["Vue","Components \u0026 Libraries"],"sub_categories":["UI Components"],"readme":"# 🔥 Vue3 Side Panel\n\nEasy to use and flexible modal sidebar component for Vue3\n\n![alt text](https://media.giphy.com/media/WHSYR86n0Tm2FGxRvr/giphy.gif)\n\n[Example and Documentation](https://vue3-side-panel.netlify.app/)\n\n## Features\n- Top, Right, Bottom, Left sides.\n- Slots for fixed header and footer areas.\n- Body scroll lock included thanks to [BSL].\n- Calculating of body height on screen resizing.\n (useful for setting \"height: 100%\" inside default slot)\n- Animation Flexibility via Vue Transition support\n\n### Installation\n\n\n```sh\nnpm i vue3-side-panel\n```\nor \n```sh\nyarn add vue3-side-panel\n```\nthen add Vue component for global use\n\n`main.ts`\n```ts\nimport { createApp } from 'vue';\nimport VueSidePanel from 'vue3-side-panel';\nimport 'vue3-side-panel/dist/vue3-side-panel.css'\n\nconst app = createApp(App);\napp.use(VueSidePanel);\n```\nor for local usage\n\n`App.vue`\n```ts\n// ... \nimport { VueSidePanel } from 'vue3-side-panel';\nimport 'vue3-side-panel/dist/vue3-side-panel.css';\n\nexport default defineComponent({\n components: {\n VueSidePanel\n },\n // ...\n});\n```\n\n\n### Using\n\n###### The following 3 slots are expected inside the component\n- **#header** -- not required (Fixed and non scrolled area)\n- **#default** -- required (Scrolled area)\n- **#footer** -- not required. (Fixed and non scrolled area)\n\n```html\n// without fixed areas\n\u003cVueSidePanel v-model=\"isOpened\"\u003e\n \u003cdiv style=\"height: 100%; background-color: #ccc\"\u003e\n \u003ch2\u003e This is scrolled body! \u003c/h2\u003e\n \u003c/div\u003e \n\u003c/VueSidePanel\u003e\n```\nor\n```html\n// with the fixed header, footer, custom close button and fixed body scroll\n\u003cVueSidePanel\n v-model=\"isOpened\"\n lock-scroll\n hide-close-btn\n\u003e\n \u003ctemplate #header\u003e\n \u003cdiv\u003e\n \u003ch2\u003e This is fixed header! \u003c/h2\u003e\n \u003cspan @click=\"isOpened = false\"\u003e X \u003c/span\u003e\n \u003c/div\u003e\n \u003c/template\u003e\n \u003ctemplate #default\u003e\n \u003cdiv style=\"height: 100%; background-color: #ccc\"\u003e\n \u003ch2\u003e This is scrolled body! \u003c/h2\u003e\n \u003c/div\u003e \n \u003c/template\u003e\n \u003ctemplate #footer\u003e\n \u003ch2\u003eThis is fixed footer!\u003c/h2\u003e\n \u003c/template\u003e\n\u003c/VueSidePanel\u003e\n\n```\n\n### Documentation\n\n\n\n#### Props\n\n| **Property** | **Type** | **Description** |\n|------------------|--------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| id-name | **String** | default: **'vsp-container'**. ID of div element which contain the all side panels |\n| side | '**right**' or '**bottom**' or '**left**' or '**top**' | default: '**right**'. Screenside for a modal panel |\n| rerender | **Boolean** | default: **false** By default, the modal is rendered once, and changing v-model simply causes show or hide. You can render modal on opening if set the true value. |\n| hide-close-btn | **Boolean** | default: **false** Hide the close button component which appears by default |\n| no-close | **Boolean** | default: **false** Disable the ability to close the panel by clicking on the overlay |\n| z-index | **Number** or '**auto**' or **undefined** | default: '**auto**' By default, the component finds and sets the maximum z-index of your DOM. You will disable it if you set a specific value or 'undefined' |\n| width | **String** | default: '**auto**' Min-width style property for the side panel. Example: '500px' NOTICE! Works only with 'right' and 'left' values of side option |\n| height | **String** | default: '**auto**' Min-height style property for the side panel. Example: '500px'. NOTICE! Works only with 'top' and 'bottom' values of side option |\n| lock-scroll | **Boolean** | default: **false** Locks the body scroll if you set it to true. NOTICE! For some css frameworks this is not enough. Read the description of the lock-scroll-html option |\n| lock-scroll-html | **Boolean** | default: **true** Works only with the lock-scroll option. Bulma alike frameworks add \"overflow-y: scroll;\" option to the html tag and BSL (body-scroll-lock library) stops working after that. This option helps to resolve this problem. You can turn it off if you are not suffering of this issue. |\n| transition-name | **String** or **undefined** | default: **undefined**. There are **slide-right** or **slide-left** or **slide-top** or **slide-bottom** or **undefined** options to use. Under the hood, selecting **undefined** simply sets **slide-right** if the side == 'right' or **slide-left** if the side == 'left'. Animation works through **\u0026lt;Transtion\u0026gt;** Vue component. You can use your own transition name to override the default animation. For example: setting **transition-name=\"my-transition\"** expects you to create at least these classes with your own css **.my-transition-enter-active** and **.my-transition-leave-active**. @see [https://vuejs.org/guide/built-ins/transition.html](https://vuejs.org/guide/built-ins/transition.html) |\n| overlay-color | **String** | default: '**black**' Color of overlay that you can see under a side panel. This is a CSS style option and it is why you can use a different string format to set a color. For example: rgb(0, 22, 22), #aaa;, white also suit |\n| overlay-opacity | **Number** | default: **0.5** The opacity of the overlay |\n| overlay-duration | **Number** | default: **500** How fast the overlay spawn animation works. ( in milliseconds ) |\n| panel-color | **String** | default: '**white**'. The default color of the main container. This is a style option so it can be any string that the browser supports. See 'overlay-color' to find the examples |\n| panel-duration | **Number** | default: **300** This is the same as the overlay-duration option. See above |\n| header-class | **String** | default: '' It will be necessary in cases where you need to change the default styles of a static header block within a panel |\n| body-class | **String** | default: '' It will be necessary in cases where you need to change the default styles of a scrolled body block within a panel |\n| footer-class | **String** | default: '' It will be necessary in cases where you need to change the default styles of a static footer block within a panel |\n| | | |\n\n\n#### Events\n| **Event** | **Description** |\n|-----------|---------------------------------------------------------------|\n| @opened | Called when opening animation is finished and modal is opened |\n| @closed | Called when closing animation is finished and modal is closed |\n\n\n## License\n\nMIT\n\n[BSL]: \u003chttps://github.com/willmcpo/body-scroll-lock\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheadmandev%2Fvue3-side-panel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fheadmandev%2Fvue3-side-panel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheadmandev%2Fvue3-side-panel/lists"}