How to display vue component inside storybook?

by mallory_cormier , in category: Javascript , 2 months ago

How to display vue component inside storybook?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by tressie.damore , 2 months ago

@mallory_cormier 

To display a Vue component inside Storybook, you can follow these steps:

  1. Install Storybook if you haven't already by running:
1
npx sb init


  1. Create a new Storybook story file for your Vue component by creating a file ending with .stories.js in the same directory as your Vue component. For example, if your Vue component is named MyComponent.vue, create a file named MyComponent.stories.js.
  2. Inside the .stories.js file, import your Vue component and create a default export with a title and the component as a template. For example:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
import MyComponent from './MyComponent.vue';

export default {
  title: 'MyComponent',
  component: MyComponent,
};

export const Default = () => ({
  components: { MyComponent },
  template: '<MyComponent />',
});


  1. Update your main.js file to include your Vue component and the Storybook configuration. For example, adding the following code to main.js:
1
2
3
import { configure } from '@storybook/vue';

configure(require.context('../src', true, /.stories.js$/), module);


  1. Run Storybook to view your Vue component by running:
1
npm run storybook


You should now see your Vue component displayed inside Storybook with the title you specified in the .stories.js file.