[Bug]: Icons does not render correctly with IconGallery addon with Vue3

[charlesfonlupt]

Describe the bug

I am trying to implements Icons documentation through StoryBook 6.5.12 (Vue3, Vite) following the doc

import {Meta} from '@storybook/addon-docs/blocks';
import {IconGallery, IconItem} from "@storybook/addon-docs";
import Icons from '../components/icons.vue';

<Meta title="Foundations/Iconography" />

# Iconography

<IconGallery>
  <IconItem name="Building001">
    <Icons icon="Building001" />
  </IconItem>
  <IconItem name="Building002">
    <Icons icon="Building002" />
  </IconItem>
  <IconItem name="Building003">
    <Icons icon="Building003" />
  </IconItem>
</IconGallery>

All my icons are listed as component in a icons.vue file

<template>
  <component v-bind="$attrs" :is="icon" />
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import Building001 from './icons/building/building001.vue';
import Building002 from './icons/building/building002.vue';
import Building003 from './icons/building/building003.vue';
export default defineComponent({
  props: {
    icon: {
      type: String,
      required: true,
    }
  },
  components: {
    Building001,
    Building002,
    Building003,
  }
});

</script>

When trying to Import them, the mdx page does not render properly.

System

System:
  OS: Mac OS Monterrey Version 12.6
  CPU: 2 GHz Intel Core i5 quatre cœurs
Binaries: 
  Node 16.17.0
  Yarn 1.22.19
Browsers: 
  Safari 16.0
  Brave Browser: 1.44.105
Dependencies: 
  "@nuxtjs/tailwindcss": "^5.3.2",
    "@storybook/addon-a11y": "^6.5.12",
    "@storybook/addon-essentials": "^6.5.12",
    "@storybook/addon-postcss": "^2.0.0",
    "@storybook/builder-vite": "^0.2.4",
    "@storybook/node-logger": "^6.5.12",
    "@storybook/vue3": "^6.5.12",
    "@vitest/ui": "^0.23.1",
    "nuxt": "3.0.0-rc.9",
    "postcss": "^8.4.14",
    "prettier": "2.7.1",
    "sass": "^1.54.8",
    "sass-loader": "^13.0.2",
    "storybook-dark-mode": "^1.1.2",
    "tailwindcss": "^3.1.8",
    "vite-svg-loader": "^3.5.1",
    "vitest": "^0.23.1"

Additional context

StoryBook is used in a Nuxt3 project

[charlesfonlupt]

I tried to import icons directly, but it present the same problem. The page does not render properly and there is no indication on the possible error from the server.

import {Meta} from '@storybook/addon-docs/blocks';
import {IconGallery, IconItem} from "@storybook/addon-docs";
import Building001 from '../components/icons/building/building001.vue';

<Meta title="Foundations/Iconography" />

# Iconography

<IconGallery>
  <IconItem name="Building001">
    <Building001 />
  </IconItem>
</IconGallery>

[Diboby]

I have the same issue with Vue 3

[blowsie]

Still relevant in SB7.

I assume due to the children wont match the type React.ReactNode

[blowsie]

@chakAs3 you have a pretty good handle on SB7 and Vue, is there any quick wins / workarounds here?

[blowsie]

My thinking was that it would be great if we could do something like this as a workaround

<IconGallery>
  <IconItem name="Building001">
    <Vue>
      <Building001 />
    </Vue>
  </IconItem>
</IconGallery>

[blowsie]

So heres a workaround.

import { Meta, Canvas, Story, Stories, IconGallery, IconItem } from '@storybook/addon-docs'
import * as IconStories from './Icon.stories.ts'

<Meta title="Style Guide/Icons" />

# Icons

<IconGallery>
  <IconItem name="Spinner">
    <Story of={IconStories.Spinner} />
  </IconItem>
</IconGallery>

Icon.stories.ts, here is just a valid CSF3 story file exporting some stories.

[chakAs3]

Hi @blowsie how are doing ? can you explain me more, the constraint that you have and what you want to achieve, i pretty sure that will be relevant for others as well

[blowsie]

@chakAs3 as mentioned above <IconItem> is expecting a React.ReactNode child, so its not possible to insert Vue Icon Components as a direct child.

My workaround here is to add the Icons to a giant story file and then use the <Story> component as a child instead.

In the end, users will end up here because the docs doesn't provide a full working solution.

[chakAs3]

Oh. it is interesting, i never looked at mdx document, i see the issue, this will be always buggy as we only use Reat to write blocks and mdx docs, we planed to look if this and provide proper Vue mdx tool.

[kylegach]

Hi, folks. I'm sorry this bug has sat with needs triage so long. Not sure how it fell through the cracks like that.

MDX in Storybook was built on MDX 1, originally, which only supported React. Storybook 7 now uses MDX 2, which supports other renderers, like Vue, but Storybook's MDX implementation is still React-only, for now.

And the Doc Blocks, like IconGallery, are designed for Storybook's MDX. The API reference linked above makes it clear that this only works with React.

As this is intended (though unfortunate) behavior, and not a bug, I'm closing this issue.

I'd encourage you to upvote and add your thoughts to this existing feature request: https://github.com/storybookjs/storybook/issues/7729

[stephanfriedrich]

hello @kylegach , quick question, if i'm not mistaken, currently no vue components can be integrated and used in mdx, correct ?

it doesn't work for me, and otherwise the following storybook-addon-vue-mdx wouldn't exist, would it ?

thx, have a :sun_with_face: y day