Code example shows vue-component-444 instead of component name

[Nizari]

Describe the bug I would expect to see the component name inside the example. This works for al my other components except for 1 where it shows <template><vue-component-444 /></template>

Any idea how this is possible?

To Reproduce Insert the below code inside your storybook

Expected behavior A clear and concise description of what you expected to happen.

Screenshots If applicable, add screenshots to help explain your problem.

Code snippets

import StoryRouter from 'storybook-vue-router';
import AButton from '../components/Button/Button.vue';
import AButtonContent from '../components/Button/ButtonContent.vue';

export default {
  title: 'Atoms/AButton',
  component: AButton,
  subcomponents: { AButtonContent },
  decorators: [
    StoryRouter({}, { routes: [
      { path: '/', component: { template: '<div>Home</div>' } },
      { path: '/home', component: { template: '<div>Home</div>' } },
    ] }),
  ],
};

// We create a “template” of how args map to rendering
const Template = (args, { argTypes }) => ({ components: { AButton },
  props: Object.keys(argTypes),
  template: `<AButton v-bind="$props">
    Home
  </AButton>` });

// Each story then reuses that template
export const Default = Template.bind({});
Default.args = { };

<template>
  <div
    class="button"
    :class="{
      'button--alternative': isAlternative,
      'button--disabled': isDisabled,
    }"
    @[clickEventName]="executeClick"
    v-on="getChildListenersExcept(['click'])"
  >
    <router-link v-if="hasRouterLink" :to="$attrs.to">
      <ButtonContent v-bind="$attrs">
        <!-- @slot The content inside the button -->
        <slot></slot>
      </ButtonContent>
    </router-link>
    <template v-else>
      <ButtonContent v-bind="$attrs">
        <!-- @slot The content inside the button -->
        <slot></slot>
      </ButtonContent>
    </template>
  </div>
</template>

<script lang="ts" src="./Button.ts" />
<style lang="scss" src="./Button.scss"></style>

System System: OS: macOS 10.15.7 CPU: (8) x64 Intel(R) Core(TM) i5-8279U CPU @ 2.40GHz Binaries: Node: 14.15.1 - /usr/local/bin/node npm: 6.14.8 - /usr/local/bin/npm Browsers: Chrome: 87.0.4280.67 Firefox: 83.0 Safari: 14.0.1 npmPackages: @storybook/addon-a11y: ^6.1 => 6.1.6 @storybook/addon-actions: ^6.1 => 6.1.6 @storybook/addon-essentials: ^6.1.9 => 6.1.9 @storybook/addon-knobs: ^6.1 => 6.1.6 @storybook/addon-links: ^6.1.9 => 6.1.9 @storybook/addon-notes: ^5.3 => 5.3.21 @storybook/addon-viewport: ^6.1 => 6.1.6 @storybook/addons: ^6.1 => 6.1.6 @storybook/vue: ^6.1.9 => 6.1.9

[pocka]

Due to technical limitation, you can't use Dynamic Source Rendering for Vue.js with decorators that return Vue.extend-ed component (in your case, StoryRouter). Use code type to show a story code.

That Dynamic Source Rendering feature decides which Vue component instance is the bottom story by inspecting and traversing a STORYBOOK_WRAPS property on a story component that @storybook/vue injects to decorators and stories. It seems that that process does not happen for decorators that return Vue.extend(...).

https://codesandbox.io/s/vue-storybook-dsr-decorators-8w2k0?file=/src/test.stories.js

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!