decorator not working when using Component Story Format (CSF)

[Zelig880]

Issue:

Which version are you using?

1.0.7

Are you using storybook-router with a react based project or a vue one?

Vue

Please describe the problem:

I have tried to set up the above plugin with the new CSF syntax, and after debugging, i noticed that the plugin is initialised, but not triggered.

Translating to a storyOf syntax works fine.

Running the below story will trigger an error because the router is not defined.

I have tried the following different way of calling the decorator: decorators: [StoryRouter], decorators: [StoryRouter()],

Please explain how to reproduce the issue or (better) provide an example to do it.

import StoryRouter from 'storybook-vue-router';

export default {
  title: 'PopupMenu',
};
export const defaultPopupMenu = () => ({
  decorators: [StoryRouter],
  template: '<router-link to="/" />',
});

[sharvit]

Same problem when using react

[ndelangen]

import StoryRouter from 'storybook-vue-router';

export default {
  title: 'PopupMenu',
  decorators: [StoryRouter],
};
export const defaultPopupMenu = () => ({
  template: '<router-link to="/" />',
});

You're placing the decorators property in the wrong export I think.

[phenrique7]

You should to pass the story as an argument to the return function of the StoryRouter:

import StoryRouter from 'storybook-vue-router';

export default {
  title: 'PopupMenu',
  decorators: [storyFn => StoryRouter()(storyFn)]
};

export const defaultPopupMenu = () => ({
  template: '<router-link to="/" />',
});

[rdunk]

decorators: [StoryRouter()] did it for me.

[mszkb]

decorators: [StoryRouter()] did it for me.

Full example with Knobs:

import StoryRouter from "storybook-vue-router";
import { withKnobs, array, object } from "@storybook/addon-knobs";

export default {
  title: "Project List",
  decorators: [withKnobs, StoryRouter()],
};

[Pyrolistical]

for those using preview.js this works

import {addDecorator} from '@storybook/react';
import StoryRouter from 'storybook-react-router';

addDecorator(StoryRouter());

[kinoli]

The preview.js addDecorator handling should be added to the Readme file. I had to hunt for this solution.

[john-craft]

Building on @mszkb's example, I had to add Storybook Addon Actions to get it working. Also, I am not sure that you need to explicitly add the withKnobs decorator (although, I already had withKnobs defined in `.storybook/main.js). Below is what worked for me.

1. Install Storybook Addon Actions and then add it to .storybook/main.js like so:

module.exports = {
  addons: ['@storybook/addon-actions'],
};

2. Update the story to include the StoryRouter decorator.

import StoryRouter from "storybook-vue-router";

export default {
  title: "SomeStory",
  decorators: [StoryRouter()],
};

[anil-hulkapps]

Thank you @john-craft ..working perfectly