{"id":13423916,"url":"https://github.com/vue-comps/vue-side-nav","last_synced_at":"2026-01-04T12:02:53.182Z","repository":{"id":57158533,"uuid":"55700247","full_name":"vue-comps/vue-side-nav","owner":"vue-comps","description":"side-nav - done in vue","archived":false,"fork":false,"pushed_at":"2017-03-24T12:11:47.000Z","size":183,"stargazers_count":51,"open_issues_count":2,"forks_count":8,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-15T17:37:23.766Z","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":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vue-comps.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":"2016-04-07T14:15:02.000Z","updated_at":"2025-02-28T03:02:34.000Z","dependencies_parsed_at":"2022-09-07T21:01:30.578Z","dependency_job_id":null,"html_url":"https://github.com/vue-comps/vue-side-nav","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vue-comps%2Fvue-side-nav","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vue-comps%2Fvue-side-nav/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vue-comps%2Fvue-side-nav/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vue-comps%2Fvue-side-nav/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vue-comps","download_url":"https://codeload.github.com/vue-comps/vue-side-nav/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244159976,"owners_count":20408017,"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-07-31T00:00:44.939Z","updated_at":"2026-01-04T12:02:48.161Z","avatar_url":"https://github.com/vue-comps.png","language":"Vue","funding_links":[],"categories":["Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","UI组件","Awesome Vue.js","UI Components"],"sub_categories":["Component Collections","Menu"],"readme":"# DEPRECATED see [cerijs](https://github.com/cerijs) and [ceri-side-nav](https://github.com/ceri-comps/ceri-side-nav)\n\n\n# vue-side-nav\n\nfor the best user-experience when navigating your side, you can use a responsive side-nav.\n\n### [Demo](https://vue-comps.github.io/vue-side-nav)\n\n\n# Install\n\n```sh\nnpm install --save-dev vue-side-nav\n// vue touch@next - not released on npm currently\nnpm install --save-dev git://github.com/vuejs/vue-touch.git#next\n\n// vue@1.0\nnpm install --save-dev vue-side-nav@1 vue-touch@1\n```\nor include `build/bundle.js`.\n\n## Usage\n```coffee\n# somewhere\nVue.use(require('vue-touch'))\n\n# in your component\ncomponents:\n  \"side-nav\": require(\"vue-side-nav\")\n# or, when using bundle.js\ncomponents:\n  \"side-nav\": window.vueComps.sideNav\n```\n```html\n\u003cside-nav\u003e\n  \u003cli\u003eFirst Text\u003cli\u003e\n\u003c/side-nav\u003e\n\u003c!-- sibling elements will be set to margin-left:240px for `fixed` and `is-fixed=true` --\u003e\n\u003ccontainer\u003e\n\u003c/container\u003e\n```\nFor examples see [`dev/`](dev/).\n\n### ERROR: Module build failed: SyntaxError: 'with' in strict mode\nCurrently [buble](https://gitlab.com/Rich-Harris/buble) is injecting `strict` mode in all processed js files. The down to ES5 compiled component contains `with`, which is forbidden in `strict` mode.\nBuble is used, for example, in rollup, which is used in laravel.\n\nIf you are running in this problem, make sure to exclude this component from processing with buble.\n\n#### Props\nName | type | default | description\n---:| --- | ---| ---\nwidth | Number | 240 | width of the side-nav\nfixed-screen-size | Number | 992 | Used with `fixed`. Above this size, the menu will stay opened.\nnot-dismissable | Boolean | false | A click on the overlay will not dismiss it\nclose-on-click | Boolean | false | Any click within the side-nav will close it\nfixed | Boolean | false | should always show on large screens\nis-opened | Boolean | false | opens or closes the side-nav - use in conjuction with `toggled` event\nright | Boolean | false | attach to the right side instead of the left\ntransition | Function | no-transition | will be called on open and close with `{el,style,cb}`.\nclass | vue class | [\"side-nav\"] | class of the `ul`\nstyle | vue style | [] | style of the `ul`\nid | String | - | id of the `ul`\nopacity | Number | 0.5 | opacity of the overlay\nz-index | Number | 1000 | minimum zIndex of the overlay, cannot be lower than 100 (see [vue-overlay](https://github.com/vue-comps/vue-overlay) for specifics)\n\nMenu will be visibile when either is-fixed or is-opened is true.\n\n#### Events\nName |  description\n---:| ---\nbefore-enter | will be called before open animation\nafter-enter |  will be called when opened\nbefore-leave |  will be called before close animation\nafter-leave |  will be called when closed\nfixed(isFixed:Boolean) | emitted when menu get fixed or unfixed on large screen.\ntoggled(isOpened:Boolean) | emitted when menu gets opened or closed.\n\n#### Transition\n\nYou can provide a transition like this:\n```js\nVelocity = require(\"velocity-animate\")\n\ntemplate: \"\u003cside-nav transition='moveIn'\u003e\u003c/side-nav\u003e\",\nmethods:{\n  moveIn: function ({el,style,cb}) {\n    Velocity el, \"stop\"\n    Velocity el, style, {\n      duration: 300,\n      queue: false,\n      easing: 'easeOutQuad',\n      complete: cb\n    }\n  }\n}\n```\n\nThe background is managed by `vue-overlay`.\nSee [here](https://github.com/vue-comps/vue-overlay#overlayfadeelopacitycb) for an example on how to change its fading function.\n\n## Changelog\n- 2.0.0  \nnow compatible with vue 2.0.0  \nclose overlay on destroy  \n\n- 1.1.0  \nevents are renamed after vue transitions  \nadded toggled event  \n\n- 1.0.1  \nadded `z-index` prop  \n\n- 1.0.0  \nrenamed `hide-on-screen-size` to `fixed-screen-size`  \n\n- 0.3.0  \nrenamed `not-dismissible` to `not-dismissable`. added `close-on-click`  \n\n# Development\nClone repository.\n```sh\nnpm install\nnpm run dev\n```\nBrowse to `http://localhost:8080/`.\n\n## License\nCopyright (c) 2016 Paul Pflugradt\nLicensed under the MIT license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvue-comps%2Fvue-side-nav","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvue-comps%2Fvue-side-nav","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvue-comps%2Fvue-side-nav/lists"}