A Storybook decorator that allows you to use your routing-aware components.
npm install --save-dev storybook-vue-router
The StoryRouter decorator
The 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.
In its default behavior the decorator just log every route action perfomed using the storybook action logger. 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.
Suppose you have a navigation bar that uses the vue-router
const NavBar = template: ` <div> <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> </div>`;
you can define a story for your component just like this:
or if you want to include in your story the target components (with a local navigation) you can write:
;; const Home = template: '<div>Home</div>'; const About = template: '<div>About</div>'; ;
The first argument is an object that you can use to extend the default behavior.
Every 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.
This way you can for example link stories together using the
links addons with the linkTo function.
The link keys need to be equal (
===) to the fullPath of the destination route.
The second argument is another object you can use to specify one of the vue-router constructor options plus a couple of specific
- initialEntry, the starting location [default
- globalBeforeEach, a function which will be installed as a global beforeEach guard
Advanced usage and examples
yarn install && yarn bootstrap
As 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