Merge pull request #14809 from thomasaull/14788-fix-vue3-components-in-decorators

Vue3: Fix components in decorators

app/vue3/src/client/preview/index.ts

@@ -24,7 +24,9 @@ function normalizeFunctionalComponent(options: ConcreteComponent): ComponentOpti
   return typeof options === 'function' ? { render: options, name: options.name } : options;
 }
 
-function prepare(story: StoryFnVueReturnType, innerStory?: ConcreteComponent): Component | null {
+function prepare(rawStory: StoryFnVueReturnType, innerStory?: ConcreteComponent): Component | null {
+  const story = rawStory as ComponentOptions;
+
   if (story == null) {
     return null;
   }
@@ -33,7 +35,7 @@ function prepare(story: StoryFnVueReturnType, innerStory?: ConcreteComponent): C
     return {
       // Normalize so we can always spread an object
       ...normalizeFunctionalComponent(story),
-      components: { story: innerStory },
+      components: { ...(story.components || {}), story: innerStory },
     };
   }
 

examples/vue-3-cli/src/stories/ComponentInDecorator.stories.js

@@ -0,0 +1,33 @@
+import MyButton from './Button.vue';
+
+export default {
+  title: 'Example/ComponentInDecorator',
+  component: MyButton,
+
+  decorators: [
+    () => ({
+      components: {
+        MyButton,
+      },
+
+      template: `
+        <MyButton label="Button from decorator"/>
+        <story/>
+      `,
+    }),
+  ],
+};
+
+const Template = (args) => ({
+  components: { MyButton },
+  setup() {
+    return { args };
+  },
+  template: '<my-button v-bind="args" />',
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+  primary: true,
+  label: 'Button',
+};