{"_id":"@dorinbotan/storybook-vue-router","_rev":"1-90accde187648eb397b9139905b56117","name":"@dorinbotan/storybook-vue-router","dist-tags":{"latest":"1.0.8"},"versions":{"1.0.7":{"name":"@dorinbotan/storybook-vue-router","version":"1.0.7","description":"A storybook decorator that allows you to use routing-aware components in your stories.","main":"./dist/vue.js","license":"MIT","author":{"name":"Dorin Botan, Gianni Valdambrini"},"repository":{"type":"git","url":"https://github.com/dorinbotan//storybook-router.git"},"bugs":{"url":"https://github.com/dorinbotan//storybook-router/issues"},"homepage":"https://github.com/dorinbotan//storybook-router","keywords":["storybook","vue","vue-router"],"peerDependencies":{"@storybook/addon-actions":"^4.0.0||^5.0.0||^6.0.0","@storybook/addons":"^4.0.0||^5.0.0||^6.0.0","vue":"^2.0.0","vue-router":"^2.7.0 || ^3.0.0"},"devDependencies":{"@storybook/addon-actions":"^4.0.9||^5.0.2||^6.0.0","@storybook/addons":"^4.0.9||^5.0.2||^6.0.0","babel-cli":"^6.24.1","babel-preset-env":"^1.6.1","babel-preset-vue":"^2.0.2","vue":"^2.6.9","vue-loader":"^15.7.0","vue-router":"^3.0.2","vue-template-compiler":"^2.6.9"},"scripts":{"prepublish":"NODE_ENV=production npm run build","build":"babel -d dist/ vue.js"},"gitHead":"4ec9e7c10081fa5d1178572ab76e17bba639922d","_id":"@dorinbotan/storybook-vue-router@1.0.7","_nodeVersion":"17.7.2","_npmVersion":"8.5.2","dist":{"integrity":"sha512-U6T61oGe58UWE2f87E7ANFo1hjhEM/2prZgdsZqEBHgiPukuN9aAIIhzSCwvoucg2KLreCELhbop3OxJH7Wv1g==","shasum":"331f42a0ed3b07b0b7b8673e134769b5326e6376","tarball":"https://registry.npmjs.org/@dorinbotan/storybook-vue-router/-/storybook-vue-router-1.0.7.tgz","fileCount":4,"unpackedSize":7530,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG3lCscajOMxsDfjTOfJKd4jCYQ60iWlygXXPpexEIlsAiEA3KKoJllYooY9nb29rjskuCs9Y68y3RdZ4Mtr9vnWeRw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi5AA/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq18hAAh7X/JcSk2DpwrFRHjRIDZaSDDw4PibL26J1eiAMblOTz9QNp\r\n84B5yc82FuJderWBXLWPS0FIq17fte+SXHuz/moPs1HICG3Zh2IwUSB8xrlN\r\n6N5K6GDyqJrv6/3n0ajLw+Ksscdi2ZzF/TpassC2ESu6zfda1LE/G5ltRv+K\r\nmJ2lPG1wT7EwZKp8GiTPyoleF7ShzIHLtw80xHRvI7UtNi8OJg0R0lCHvw0j\r\nB9Gbm5kmxIF6A5ucN2Q+mM1XxZxQR1lITNrubdzb2KuBJmvQ8mSezf8kXYez\r\nBVwKrOMGi8S0F2v/U7Ru/TjqWS8UeU8gLq/h9pa+FwRfTNwyjuWhzsbD7iuh\r\nGoTsCcDkJLoRMXGaoIlnMdlb2MWEcJZOQneM1LSxI3XKX7BQtAL2ViVYiPdP\r\nHHR7doHeCnX6/JH7ewJH0ZgQ/TQ+w2kBWzVtyj89OO1BSHcOK/3LFU+6SqXO\r\nhf25wtopmwPvdeDPAzbq7vDtooB7u8sgqgD67g8xWVpxpBkOTwgNdbp3OJq3\r\n9xOLh8FDkv6xjngEXR/YcoRar3f6Gy5EIvn4di7wgq+1OUy+Ccv42RP2YYD+\r\nKDXxZMIkZIho8kss/AAPj/Lh6lr9TiyCXVy0lolNFhNUwF/gamAOmVJLuTX8\r\nNE9wOHCuc8GKSIRj1juVLsp+rEHS88QDnqk=\r\n=UvcG\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dorinbotan","email":"dorinbotan@outlook.com"},"directories":{},"maintainers":[{"name":"dorinbotan","email":"dorinbotan@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-vue-router_1.0.7_1659109439655_0.10746836574523022"},"_hasShrinkwrap":false},"1.0.8":{"name":"@dorinbotan/storybook-vue-router","version":"1.0.8","description":"A storybook decorator that allows you to use routing-aware components in your stories.","main":"./dist/vue.js","license":"MIT","author":{"name":"Dorin Botan, Gianni Valdambrini"},"repository":{"type":"git","url":"git+https://github.com/dorinbotan/storybook-router.git"},"bugs":{"url":"https://github.com/dorinbotan/storybook-router/issues"},"homepage":"https://github.com/dorinbotan/storybook-router","keywords":["storybook","vue","vue-router"],"peerDependencies":{"@storybook/addon-actions":"^4.0.0||^5.0.0||^6.0.0","@storybook/addons":"^4.0.0||^5.0.0||^6.0.0","vue":"^2.0.0","vue-router":"^2.7.0 || ^3.0.0"},"devDependencies":{"@storybook/addon-actions":"^4.0.9||^5.0.2||^6.0.0","@storybook/addons":"^4.0.9||^5.0.2||^6.0.0","babel-cli":"^6.24.1","babel-preset-env":"^1.6.1","babel-preset-vue":"^2.0.2","vue":"^2.6.9","vue-loader":"^15.7.0","vue-router":"^3.0.2","vue-template-compiler":"^2.6.9"},"scripts":{"prepublish":"NODE_ENV=production npm run build","build":"babel -d dist/ vue.js"},"gitHead":"2e209d7f4418d25c87cb675f998be8b3e7db77b9","_id":"@dorinbotan/storybook-vue-router@1.0.8","_nodeVersion":"17.7.2","_npmVersion":"8.5.2","dist":{"integrity":"sha512-GlF4x0eSPJns93uwW2y8s2jz/Fvg75+NHekK3Y7FgUyUwxusPbmcdaCjGVq8UICeK87GQuYeXnVjhAUJEyFXRw==","shasum":"4d2e43706c36ada713062f959bfd8f0987d815c0","tarball":"https://registry.npmjs.org/@dorinbotan/storybook-vue-router/-/storybook-vue-router-1.0.8.tgz","fileCount":4,"unpackedSize":7579,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHTaenwLPCFHwMlI29bK5k6cRWO3uSeMIgxZLlKdZnI7AiAsmW167Q2KvENAKH1J7z+l9CV4af++zpcjFZ0IODDPlg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi5AGPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoWgQ/+IVY3Ja992h2JkuP2kCM+GVdYvrlopz51uOD5LmTw/jWIItd2\r\nSwdE7pfk1OvgPJypVPBiNB6IAtN5xK3sPHh5Vw1jXIUMbeGgCLrcSXZvLzwD\r\n3e8TvUpH2Clyqzs30osXRXGhimL7lB9V3qDQICTdhWOGpHUpH/byfzEZiy2k\r\nRN8gslj8u4rj6km2QzkMBAVVY5l1nAV5GRVWI51NWP7FXLlNsYAke+Z+4JTX\r\n+wnyTfGwRd/DZc2Xl6ql83pEwj4O6VfTQ/5A7iuon3RFrad2Z8pK1Dku0njk\r\nFpHG3yr0KdR1UzSk/FzORczm8IbyuuRfOdBYyqjIcb42DAMYBe27gtlaQqIB\r\nUEljhKzcoNi2SAYq7cC0oVU6QShwlvSGsiGTVipqeFUrDnVZ5JO1ITBHq2Rt\r\neqLSs64Y9UvToU/8+2Q7FFVjUwrvWGAP/b4ByT7xM9ZZMobCsYnlVz31jhnu\r\ntHOqRQEe6V94Wl3E8EJkCb2viyOVsQ1dNTxS0rndDKoScb6BJerFooc7wJPm\r\nQZHlh5HLpgkK3qxTPwJOKc6Y2okdJrVT8CMWZ8RhRwMrjBQvsgDlxG9bJMLR\r\nOisZD0cr1RPbHE6g5KvFRrCiiDkee/L1mg+zjsLIWilTaI/LyQvtGYKjPIGU\r\nwQGYQnVAlribtuBDfSkoFK9HAriIXST/4AM=\r\n=X06Y\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dorinbotan","email":"dorinbotan@outlook.com"},"directories":{},"maintainers":[{"name":"dorinbotan","email":"dorinbotan@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-vue-router_1.0.8_1659109775222_0.04878723111490402"},"_hasShrinkwrap":false}},"time":{"created":"2022-07-29T15:43:59.583Z","1.0.7":"2022-07-29T15:43:59.829Z","modified":"2022-07-29T15:49:35.496Z","1.0.8":"2022-07-29T15:49:35.427Z"},"maintainers":[{"name":"dorinbotan","email":"dorinbotan@outlook.com"}],"description":"A storybook decorator that allows you to use routing-aware components in your stories.","homepage":"https://github.com/dorinbotan/storybook-router","keywords":["storybook","vue","vue-router"],"repository":{"type":"git","url":"git+https://github.com/dorinbotan/storybook-router.git"},"author":{"name":"Dorin Botan, Gianni Valdambrini"},"bugs":{"url":"https://github.com/dorinbotan/storybook-router/issues"},"license":"MIT","readme":"# @dorinbotan/storybook-vue-router\n\nA [Storybook](https://storybook.js.org/) decorator that allows you to use your routing-aware components.\n\n## Install\n\n    npm install --save-dev @dorinbotan/storybook-vue-router\n\n## The StoryRouter decorator\nThe decorator is actually a function which wraps the `VueRouter` instance. It accepts two optional arguments that you can use if you want to build a prototype of your navigation within storybook or if you need more control over the router itself.\n\nIn its default behavior the decorator just log every route action perfomed using the [storybook action logger](https://github.com/storybooks/storybook/tree/master/addons/actions). If you are fine with the default arguments you can add globally the `StoryRouter` decorator, however if you need to specify some of the arguments you have to use the decorator for every story that needs it.\n\n## Usage\n\nSuppose you have a navigation bar that uses the vue-router `router-link`:\n```js\nconst NavBar = {\n  template: `\n    <div>\n      <router-link to=\"/\">Home</router-link>\n      <router-link to=\"/about\">About</router-link>\n    </div>`\n};\n```\nyou can define a story for your component just like this:\n\n```js\nimport { storiesOf } from '@storybook/vue';\nimport StoryRouter from '@dorinbotan/storybook-vue-router';\n\nstoriesOf('NavBar', module)\n  .addDecorator(StoryRouter())\n  .add('default', () => NavBar);\n```\n\nor if you want to include in your story the target components (with a local navigation) you can write:\n```js\nimport { storiesOf } from '@storybook/vue';\nimport StoryRouter from '@dorinbotan/storybook-vue-router';\n\nconst Home = {\n  template: '<div>Home</div>'\n};\n\nconst About = {\n  template: '<div>About</div>'\n};\n\nstoriesOf('Navigation', module)\n  .addDecorator(StoryRouter({}, {\n    routes: [\n      { path: '/', component: Home },\n      { path: '/about', component: About }\n    ]}))\n  .add('local', () => ({\n    components: { NavBar },\n    template: `\n      <div>\n        <nav-bar/>\n        <router-view/>\n      </div>`\n  }));\n```\n\n## StoryRouter arguments\n\nThe **first argument** is an object that you can use to extend the default behavior.\nEvery time that a key in the object matches with a path Storybook will call the callback specified for the corresponding value with the destination path as argument.\nThis way you can for example link stories together using the [`links` addons](https://github.com/storybooks/storybook/tree/master/addons/links) with the linkTo function.\nThe link keys need to be equal (`===`) to the fullPath of the destination route.\n\nThe **second argument** is another object you can use to specify one of the [vue-router constructor options](https://router.vuejs.org/en/api/options.html) plus a couple of specific `StoryRouter` options:\n * initialEntry, the starting location [default `'/'`]\n * globalBeforeEach, a function which will be installed as a [global beforeEach guard](https://router.vuejs.org/en/advanced/navigation-guards.html)\n\n\n## Advanced usage and examples\n\nYou can find more examples in the provided [stories](https://github.com/gvaldambrini/storybook-router/tree/master/examples/vue-router).\nYou can run them cloning this repository and executing (supposing you have installed globally [lerna](https://github.com/lerna/lerna)):\n\n    yarn install && yarn bootstrap\n    yarn storybook-vue-examples\n\n## Limitations\n\nAs the wrapped VueRouter uses the browser history API which is quite limited (for example, it is not possible to reset the history stack) the same limitations apply to the `StoryRouter` decorator.\n","readmeFilename":"README.md"}