How to display vue component inside storybook?

@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.