CODEWITHSUNDEEP
vue.jsstorybook
Scott Nath
Scott Nath

Reputation: 11

Storybook 6.1x Args functionality with loaders in a Vue component

I'm trying to use the new Args functionality (medium article, storybook args docs with loaders ([loaders in 6.1x) and I'm not sure how to get the loaded content into my Vue template.

this is the example for React:

export const Primary = (args, { loaded: { todo } }) => <TodoItem {...args} {...todo} />;
Primary.loaders = [
  async () => ({
    todo: (await fetch('https://jsonplaceholder.typicode.com/todos/1')).json(),
  }),
];

(https://github.com/storybookjs/storybook/blob/next/docs/snippets/react/loader-story.js.mdx)

but has anyone got this to work in Vue? I've tried a number of combinations like:

export const Primary = (args, { argTypes, loaded: { todo } }) => ({
  components: { ToolDetails },
  props: Object.keys(argTypes),
  template: <todo :todo="todo" />, (and variations like loaded.todo, {...loaded}, etc)
})
Primary.loaders = [
  async () => ({
    todo: (await fetch('https://jsonplaceholder.typicode.com/todos/1')).json(),
  }),
];
Primary.args = { (I've tried it with/without args at all)
  todo: (I tried stuff in here),
};

So...anyone now how I get an async variable (todo`) into my vue component?

thanks!

Upvotes: 1

Views: 1027

Answers (1)

Artur Vasques
Artur Vasques

Reputation: 1

This is the official documentation: https://storybook.js.org/docs/vue/writing-stories/loaders

This functionality doesnt exist for Vue framework yet.

Waiting...

Upvotes: 0

Related Questions