To integrate a Vue component into MDX documentation in Storybook 6 without creating a separate story, you can use the preview.mdx file to include your Vue component directly. The preview.mdx file allows you to add Markdown documentation and import and render your Vue components in the same file.

Here's how you can do it:

  1. Create preview.mdx File: In your Storybook project, create a file named preview.mdx in the .storybook directory. If the .storybook directory does not exist, create it at the root of your project.

  2. Add Markdown Documentation: In the preview.mdx file, you can add your Markdown documentation for the Vue component. You can include explanations, usage examples, and any other relevant content.

    markdown
    ## My Vue Component This is a sample Vue component that demonstrates its usage. ```vue <template> <div> <!-- Your Vue component code here --> </div> </template> <script> export default { // Your Vue component options here }; </script>

    Alternatively, you can use Vue-style code blocks to render your component directly in the documentation:

    vue
    <MyVueComponent />

    Replace <MyVueComponent /> with the appropriate name of your Vue component.

  3. Ensure MDX Support in Storybook: To enable MDX support in Storybook 6, make sure you have the necessary addons installed. In your main.js (or main.ts if using TypeScript) file inside the .storybook directory, configure the addons array to include the @storybook/addon-docs addon:

    javascript
    // .storybook/main.js module.exports = { // ... addons: ['@storybook/addon-docs'], };
  4. Customize Storybook Configuration (Optional): By default, Storybook looks for stories in the .stories.js files. If you don't want to create a separate story file for your Vue component, you can customize the configuration in the main.js file to look for stories in the preview.mdx file:

    javascript
    // .storybook/main.js module.exports = { // ... stories: ['../.storybook/preview.mdx'], };

    With this configuration, Storybook will use the preview.mdx file as the main source of documentation and component rendering.

  5. Start Storybook: Start your Storybook development server:

    bash
    npx start-storybook

    Now, you should be able to see the documentation for your Vue component, including the rendered component itself, in the Storybook UI.

Using the preview.mdx file, you can document and showcase your Vue components directly in the Storybook documentation without creating a separate story file. This can be helpful for simple components that don't require complex interactions and can be effectively demonstrated through code examples and explanations.

Have questions or queries?
Get in Touch