{"id":16015010,"url":"https://github.com/louismazel/vue-sidebar-ui","last_synced_at":"2026-01-19T11:02:07.898Z","repository":{"id":44286746,"uuid":"219148662","full_name":"LouisMazel/vue-sidebar-ui","owner":"LouisMazel","description":"Vue sidebar component","archived":false,"fork":false,"pushed_at":"2023-07-07T23:01:48.000Z","size":5478,"stargazers_count":2,"open_issues_count":10,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-05T03:24:13.228Z","etag":null,"topics":[],"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/LouisMazel.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":"2019-11-02T12:09:56.000Z","updated_at":"2021-01-05T09:02:27.000Z","dependencies_parsed_at":"2024-12-18T08:33:42.382Z","dependency_job_id":null,"html_url":"https://github.com/LouisMazel/vue-sidebar-ui","commit_stats":{"total_commits":18,"total_committers":1,"mean_commits":18.0,"dds":0.0,"last_synced_commit":"52f63763d95ae0aa1356c24c420cafb046fde433"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/LouisMazel/vue-sidebar-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LouisMazel%2Fvue-sidebar-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LouisMazel%2Fvue-sidebar-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LouisMazel%2Fvue-sidebar-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LouisMazel%2Fvue-sidebar-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LouisMazel","download_url":"https://codeload.github.com/LouisMazel/vue-sidebar-ui/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LouisMazel%2Fvue-sidebar-ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28565876,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-19T08:53:44.001Z","status":"ssl_error","status_checked_at":"2026-01-19T08:52:40.245Z","response_time":67,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: 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":[],"created_at":"2024-10-08T15:05:52.532Z","updated_at":"2026-01-19T11:02:07.881Z","avatar_url":"https://github.com/LouisMazel.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# VueSidebarUi\n\n\u003e A Sidebar UI component\n\n![demo-gif](./public/illu-animated.gif)\n\n## Demo\n\n[Enjoy](https://louismazel.github.io/vue-sidebar-ui/)\n\n## Installation\n\nYarn\n\n```bash\nyarn add vue-sidebar-ui\n```\n\nNPM\n\n```bash\nnpm i --save vue-sidebar-ui\n```\n\n## Usage\n\n### ES6 Modules / CommonJS\n\n```js\nimport VueSidebarUi from 'vue-sidebar-ui';\nimport 'vue-sidebar-ui/dist/vue-sidebar-ui.css';\n\nVue.component('VueSidebarUi', VueSidebarUi);\n```\n\n```html\n\u003cVueSidebarUi\n  v-model=\"yourValue\"\n/\u003e\n```\n\n### Basic usage\n\n#### Best way: Use CSS flexbox\n\n##### CSS Sheet example\n\n(*or install my CSS framework [style-helpers](https://github.com/LouisMazel/vue-input-ui)*)\n\n```css\nhtml, body, #app {\n    height: 100vh;\n}\n.flex {\n    display: flex;\n}\n.flex-1 {\n    flex: 1;\n}\n```\n\n##### Template\n\n```html\n\u003cdiv class=\"app flex\"\u003e\n  \u003cVueSidebarUi\n    v-model=\"hasLeftSidebarOpen\"\n  \u003e\n    Left side bar content\n  \u003c/VueSidebarUi\u003e\n  \u003cdiv class=\"flex-1\"\u003e\n    Main content\n  \u003c/div\u003e\n  \u003cVueSidebarUi\n      v-model=\"hasRightSidebarOpen\"\n      right\n    \u003e\n      Right side bar content\n  \u003c/VueSidebarUi\u003e\n\u003c/div\u003e\n```\n\n##### VueJS implementation\n\n```js\nimport VueSidebarUi from 'vue-sidebar-ui'\nimport 'vue-sidebar-ui/dist/vue-sidebar-ui.css'\n\nexport default {\n  name: 'App',\n  components: {\n    VueSidebarUi\n  },\n  data () {\n    return {\n      hasLeftSidebarOpen: true,\n      hasRightSidebarOpen: false\n    }\n  }\n}\n```\n\n**Check the [demo](https://louismazel.github.io/vue-sidebar-ui/)**\n\n### UMD\n\n```html\n\u003clink\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"${YOUR_PATH}/vue-sidebar-ui.css\"\n/\u003e\n\n\u003cdiv id=\"app\"\u003e\n  \u003cVueSidebarUi\n      v-model=\"hasLeftSidebarOpen\"\n    \u003e\n      Sidebar content\n  \u003c/VueSidebarUi\u003e\n\u003c/div\u003e\n\n\u003cscript src=\"https://unpkg.com/vue\" charset=\"utf-8\"\u003e\u003c/script\u003e\n\u003cscript\n  src=\"${YOUR_PATH}/vue-sidebar-ui.umd.min.js\"\n  charset=\"utf-8\"\n\u003e\u003c/script\u003e\n\n\u003cscript type=\"text/javascript\"\u003e\n  Vue.component('vue-sidebar-ui', window['vue-sidebar-ui']);\n  new Vue({\n    el: '#app',\n    data() {\n      return {\n        hasLeftSidebarOpen: false\n      };\n    }\n  });\n\u003c/script\u003e\n```\n\n## Props API\n\n| Props                       | Type              | Required | Default                     |\n| --------------------------- | ----------------- | -------- | --------------------------- |\n| v-model                     | Boolean            | yes      | -                           |\n| id                     | String            | no      | VueSidebarUi                      |\n| width                     | Number            | no      | 350                           |\n| loader                      | Boolean            | no       | false        |\n| without-close-btn             | Boolean            | no       | false    |\n| without-shadow               | Boolean            | no       | false          |\n| absolute (1)                | Boolean            | no       | false                    |\n| right (2)                | Boolean            | no       | false                    |\n\n(1) absolute : Sidebar is open above the content\n\n(2) right : You should use this props for the right sidebar\n\n## Slots\n\n| Slots           | Return                                            |\n| --------------- | ------------------------------------------------- |\n| default         | Content of the sidebar (see previous examples)    |\n| button-icon (1) | Replace default icon of open/close button         |\n| content-loader (2) | Replace default loader in sidebar content      |\n\n(1) Example:\n\n```html\n\u003cVueSidebarUi\n  v-model=\"hasLeftSidebarOpen\"\n\u003e\n  \u003ci\n    slot=\"button-icon\"\n    class=\"material-icons\"\n  \u003e\n    {{ hasRightSidebarOpen ? 'arrow_forward_ios' : 'arrow_back_ios' }}\n  \u003c/i\u003e\n\u003c/VueSidebarUi\u003e\n```\n\n*You should switch icon for open/close effect*\n\n(2) Example:\n\n```html\n\u003cVueSidebarUi\n  v-model=\"hasLeftSidebarOpen\"\n\u003e\n  \u003cMyOwnLoader\n    slot=\"content-loader\"\n  /\u003e\n\u003c/VueSidebarUi\u003e\n```\n\n## Events API\n\n| Event           | Return                                            |\n| --------------- | ------------------------------------------------- |\n| input           | Boolean value of sidebar (`true` if open, `false` if closed)      |\n\n## Contribute\n\n### Setting up development server\n\nEnsure you have Node and npm in your machine. Minimal config is:\n\n- node \u003e= 6.0\n- npm \u003e= 3.0\n\n\u003e This project is built with `node@10.x`.\n\nInstall the development dependencies by running:\n\n```bash\nnpm install\n```\n\nor\n\n```bash\nnpm ci # Recommanded if you have node \u003e 10.x\n```\n\nOnce your dependencies are installed, start the development server with:\n\n```bash\nnpm run serve\n```\n\nThis will start the development server available at `http://localhost:8080`.\n\n### Compiles and hot-reloads for development\n\n```bash\nnpm run serve\n```\n\n### Linter\n\n```bash\nnpm run lint\n```\n\n## License\n\nThis project is licensed under [MIT License](http://en.wikipedia.org/wiki/MIT_License)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flouismazel%2Fvue-sidebar-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flouismazel%2Fvue-sidebar-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flouismazel%2Fvue-sidebar-ui/lists"}