DEV Community

Using Storybook with Vue single file components

Josephus Paye II on January 08, 2020

Storybook is a great tool for designing, writing and testing components in isolation. With it, we can create and test components without needing to...

Read full post

João L. • Apr 8 '20

Hello, it's me again! I found yet another way to improve your approach, by linking your source loader into addon-docs. I just modified this part on the story.js helper:

parameters: {
  // `__source` is from our custom <include-source> SFC block
  // and webpack loader
  source: StoryComponent.__source,

  // Default config for the docs tab
  docs: {
    inlineStories: true,
    source: {  //*** Added this object ***//
      code: StoryComponent.__source
    },
  },
},

This addition allows us to render the source code directly in the addon-docs source panel.

Josephus Paye II • Apr 16 '20 • Edited

Nice 👍 What does it look like when rendered in Storybook by the way?

João L. • Apr 16 '20

It shows the content of the whole .vue file in the code panel of addon-docs. I wonder if it would be possible to do the same to pass the source code to the source addon, so the custom source panel wouldn't be needed.

optiman • Jul 9 '20

Hi, Joao L.
I want to show the content of .vue file in the source or story panel.
I tried in your way. But I cant solve this problem.
Please help me.

João L. • Jul 13 '20

It's a bit hard to help without seeing the code or why it didn't work for you.

optiman • Jul 13 '20

Thank you for your reply.
It works now.
How can I thank you?
I used your code and it works well. :)

João L. • Apr 6 '20

Hey, I realized that you don't need to manually write the path in the <include-source /> at all. Webpack can resolve the file path with this.resourcePath

const fileContent = fs
  .readFileSync(this.resourcePath, 'utf8')
  .replace(/<include-source.*\n/, '');

Josephus Paye II • Apr 16 '20

That's pretty good! Would you be able to make a pull request to the tutorial example? github.com/JosephusPaye/vue-storyb...

João L. • Apr 3 '20 • Edited

This is an amazing approach. I got excited and started implementing it but getting some obscure error from the vue loader or something. Do you have a working example by any chance?

edit: Oh silly me, I just noticed you do have it.

optiman • Jul 9 '20 • Edited

Hi, @josephuspaye
I tried as you mentioned.
But I couldn't solve the problem.
I want to show the contents of vue files in story or source board.
Can you help me please?
And are there any node modules to show the content of .vue files in story board?