Vue3: Add default render function CSF3

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

@@ -7,7 +7,7 @@ import { IStorybookSection } from './types';
 import { VueFramework } from './types-6-0';
 import { decorateStory } from './decorateStory';
 
-import { renderToDOM, storybookApp } from './render';
+import { render, renderToDOM, storybookApp } from './render';
 
 const framework = 'vue3';
 
@@ -22,7 +22,7 @@ interface ClientApi extends ClientStoryApi<VueFramework['storyResult']> {
   app: App;
 }
 
-const api = start(renderToDOM, { decorateStory });
+const api = start(renderToDOM, { decorateStory, render });
 
 export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
   return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({

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

@@ -1,9 +1,22 @@
 import dedent from 'ts-dedent';
 import { createApp, h, shallowRef, ComponentPublicInstance } from 'vue';
 import { RenderContext } from '@storybook/store';
+import { ArgsStoryFn } from '@storybook/csf';
+
 import { StoryFnVueReturnType } from './types';
 import { VueFramework } from './types-6-0';
 
+export const render: ArgsStoryFn<VueFramework> = (props, context) => {
+  const { id, component: Component } = context;
+  if (!Component) {
+    throw new Error(
+      `Unable to render story ${id} as the component annotation is missing from the default export`
+    );
+  }
+
+  return h(Component, props);
+};
+
 export const activeStoryComponent = shallowRef<StoryFnVueReturnType | null>(null);
 
 let root: ComponentPublicInstance | null = null;

examples/vue-3-cli/src/stories/Button.vue

@@ -6,9 +6,9 @@
 
 <script lang="typescript">
 import './button.css';
-import { reactive, computed } from 'vue';
+import { reactive, computed, defineComponent } from 'vue';
 
-export default {
+export default defineComponent({
   name: 'my-button',
 
   props: {
@@ -55,5 +55,5 @@ export default {
       }
     }
   },
-};
+});
 </script>

examples/vue-3-cli/src/stories/CSF3.stories.ts

@@ -0,0 +1,21 @@
+import { userEvent, within } from '@storybook/testing-library';
+import { Story, Meta } from '@storybook/vue3/types-7-0';
+import Button from './Button.vue';
+
+export default {
+  title: 'Example/ButtonCSF3',
+  component: Button,
+} as Meta;
+
+export const Default: Story = { args: { label: 'Default' } };
+
+export const Primary: Story = {
+  args: {
+    label: 'Primary',
+    primary: true,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole('button'));
+  },
+};