storybook-vue-router

npmpackage.info

Gathering detailed insights and metrics for storybook-vue-router

Other packages similar to storybook-vue-router

storybook-vue3-router

5.0.0

A Storybook decorator that allows you to build stories for your routing-aware components.

@dorinbotan/storybook-vue-router

1.0.8

A storybook decorator that allows you to use routing-aware components in your stories.

potatify

0.1.35

This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

@netsells/storybook-router

1.3.0

This package provides an easy and convenient way to provide routes to your Vue-based stories.

Gathering detailed insights and metrics for 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.

Usage

Suppose you have a navigation bar that uses the vue-router router-link:

1const NavBar = { 2 template: ` 3 <div> 4 <router-link to="/">Home</router-link> 5 <router-link to="/about">About</router-link> 6 </div>` 7};

you can define a story for your component just like this:

1import { storiesOf } from '@storybook/vue'; 2import StoryRouter from 'storybook-vue-router'; 3 4storiesOf('NavBar', module) 5 .addDecorator(StoryRouter()) 6 .add('default', () => NavBar);

or if you want to include in your story the target components (with a local navigation) you can write:

1import { storiesOf } from '@storybook/vue'; 2import StoryRouter from 'storybook-vue-router'; 3 4const Home = { 5 template: '<div>Home</div>' 6}; 7 8const About = { 9 template: '<div>About</div>' 10}; 11 12storiesOf('Navigation', module) 13 .addDecorator(StoryRouter({}, { 14 routes: [ 15 { path: '/', component: Home }, 16 { path: '/about', component: About } 17 ]})) 18 .add('local', () => ({ 19 components: { NavBar }, 20 template: ` 21 <div> 22 <nav-bar/> 23 <router-view/> 24 </div>` 25 }));

StoryRouter arguments

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 StoryRouter options:

initialEntry, the starting location [default '/']

globalBeforeEach, a function which will be installed as a global beforeEach guard

Other packages similar to storybook-vue-router

Other packages similar to storybook-vue-router

Installations

Developer Guide

No

CommonJS

10.15.3

lerna/3.16.4/node@v10.15.3+x64 (darwin)

Pull Requests

16

30

8

6

Issues

16

45

29

Releases

Unable to fetch releases

Languages

Developer

gvaldambrini

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

Dev Dependencies

storybook-router

Install

The StoryRouter decorator

Usage

StoryRouter arguments

Advanced usage and examples

Limitations

10

10

1

0

0

0

0

0

0

0

1.9

/10