diff --git a/docs/snippets/angular/app-story-with-mock.ts.mdx b/docs/snippets/angular/app-story-with-mock.ts.mdx
index 27828cb2453..abe8f5aa269 100644
--- a/docs/snippets/angular/app-story-with-mock.ts.mdx
+++ b/docs/snippets/angular/app-story-with-mock.ts.mdx
@@ -1,28 +1,38 @@
 ```ts
 // App.stories.ts
 
+import { Meta, Story } from '@storybook/angular';
+
 import { AppComponent } from './app.component';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'App',
   component: AppComponent,
-};
+} as Meta;
 
-export const Success = {
-  parameters: {
-    fetch: {
-      json: {
-        JavaScript: 3390991,
-        'C++': 44974,
-        TypeScript: 15530,
-        CoffeeScript: 12253,
-        Python: 9383,
-        C: 5341,
-        Shell: 5115,
-        HTML: 3420,
-        CSS: 3171,
-        Makefile: 189,
-      },
+const Template: Story = () => ({
+  props: {},
+});
+
+export const Success = Template.bind({});
+Success.parameters = {
+  fetch: {
+    json: {
+      JavaScript: 3390991,
+      'C++': 44974,
+      TypeScript: 15530,
+      CoffeeScript: 12253,
+      Python: 9383,
+      C: 5341,
+      Shell: 5115,
+      HTML: 3420,
+      CSS: 3171,
+      Makefile: 189,
     },
   },
 };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/angular/documentscreen-story-msw-graphql-query.ts.mdx b/docs/snippets/angular/documentscreen-story-msw-graphql-query.ts.mdx
index d392e8e7010..46edc70c36f 100644
--- a/docs/snippets/angular/documentscreen-story-msw-graphql-query.ts.mdx
+++ b/docs/snippets/angular/documentscreen-story-msw-graphql-query.ts.mdx
@@ -4,7 +4,7 @@
 import { CommonModule } from '@angular/common';
 import { HttpClientModule } from '@angular/common/http';
 
-import { moduleMetadata } from '@storybook/angular';
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
 
 import { graphql } from 'msw';
 
@@ -16,6 +16,11 @@ import { PageLayout } from './PageLayout.component';
 import { MockGraphQLModule } from './mock-graphql.module';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'DocumentScreen',
   component: DocumentScreen,
   decorators: [
     moduleMetadata({
@@ -23,7 +28,7 @@ export default {
       imports: [CommonModule, HttpClientModule, MockGraphQLModule],
     }),
   ],
-};
+}as Meta;
 
 //👇The mocked data that will be used in the story
 const TestData = {
@@ -74,30 +79,32 @@ const TestData = {
   ],
 };
 
-export const MockedSuccess = {
-  parameters: {
-    msw: [
-      graphql.query('AllInfoQuery', (req, res, ctx) => {
-        return res(ctx.data(TestData));
-      }),
-    ],
-  },
+const PageTemplate: Story = () => ({
+  props: {},
+});
+
+export const MockedSuccess = PageTemplate.bind({});
+MockedSuccess.parameters = {
+  msw: [
+    graphql.query('AllInfoQuery', (req, res, ctx) => {
+      return res(ctx.data(TestData));
+    }),
+  ],
 };
 
-export const MockedError = {
-  parameters: {
-    msw: [
-      graphql.query('AllInfoQuery', (req, res, ctx) => {
-        return res(
-          ctx.delay(800),
-          ctx.errors([
-            {
-              message: 'Access denied',
-            },
-          ])
-        );
-      }),
-    ],
-  },
+export const MockedError = PageTemplate.bind({});
+MockedError.parameters = {
+  msw: [
+    graphql.query('AllInfoQuery', (req, res, ctx) => {
+      return res(
+        ctx.delay(800),
+        ctx.errors([
+          {
+            message: 'Access denied',
+          },
+        ])
+      );
+    }),
+  ],
 };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/angular/documentscreen-story-msw-rest-request.ts.mdx b/docs/snippets/angular/documentscreen-story-msw-rest-request.ts.mdx
index 99630f4e06d..31c2e398dc0 100644
--- a/docs/snippets/angular/documentscreen-story-msw-rest-request.ts.mdx
+++ b/docs/snippets/angular/documentscreen-story-msw-rest-request.ts.mdx
@@ -4,7 +4,7 @@
 import { CommonModule } from '@angular/common';
 import { HttpClientModule } from '@angular/common/http';
 
-import { moduleMetadata } from '@storybook/angular';
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
 
 import { rest } from 'msw';
 
@@ -14,6 +14,11 @@ import { DocumentHeader } from './DocumentHeader.component';
 import { PageLayout } from './PageLayout.component';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'DocumentScreen',
   component: DocumentScreen,
   decorators: [
     moduleMetadata({
@@ -21,7 +26,7 @@ export default {
       imports: [CommonModule, HttpClientModule],
     }),
   ],
-};
+} as Meta;
 
 //👇The mocked data that will be used in the story
 const TestData = {
@@ -72,23 +77,25 @@ const TestData = {
   ],
 };
 
-export const MockedSuccess = {
-  parameters: {
-    msw: [
-      rest.get('https://your-restful-endpoint', (_req, res, ctx) => {
-        return res(ctx.json(TestData));
-      }),
-    ],
-  },
+const PageTemplate: Story = () => ({
+  props: {},
+});
+
+export const MockedSuccess = PageTemplate.bind({});
+MockedSuccess.parameters = {
+  msw: [
+    rest.get('https://your-restful-endpoint', (_req, res, ctx) => {
+      return res(ctx.json(TestData));
+    }),
+  ],
 };
 
-export const MockedError = {
-  parameters: {
-    msw: [
-      rest.get('https://your-restful-endpoint', (_req, res, ctx) => {
-        return res(ctx.delay(800), ctx.status(403));
-      }),
-    ],
-  },
+export const MockedError = PageTemplate.bind({});
+MockedError.parameters = {
+  msw: [
+    rest.get('https://your-restful-endpoint', (_req, res, ctx) => {
+      return res(ctx.delay(800), ctx.status(403));
+    }),
+  ],
 };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/angular/list-story-template.ts.mdx b/docs/snippets/angular/list-story-template.ts.mdx
index 23d8a4c5340..d1c58e37a0e 100644
--- a/docs/snippets/angular/list-story-template.ts.mdx
+++ b/docs/snippets/angular/list-story-template.ts.mdx
@@ -1,7 +1,7 @@
 ```ts
 // List.stories.ts
 
-import { moduleMetadata } from '@storybook/angular';
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
 
 import { CommonModule } from '@angular/common';
 
@@ -12,37 +12,43 @@ import { ListItem } from './list-item.component';
 import { Unchecked } from './ListItem.stories';
 
 export default {
+   /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
   component: List,
   decorators: [
     moduleMetadata({
-      declarations: [ListItem],
+      declarations: [List, ListItem],
       imports: [CommonModule],
     }),
   ],
+} as Meta;
+
+
+const ListTemplate: Story = (args) => ({
+  props: args,
+  template: `
+    <app-list>
+      <div *ngFor="let item of items">
+        <app-list-item [item]="item"></app-list-item>
+      </div>
+    </app-list>
+  `,
+});
+
+export const Empty = ListTemplate.bind({});
+EmptyListTemplate.args = {
+  items: [],
 };
 
-const ListTemplate = {
-  render: (args) => ({
-    props: args,
-    template: `
-      <list>
-        <div *ngFor="let item of items">
-          <list-item [item]="item"></list-item>
-        </div>
-      </list>
-    `,
-  }),
+export const OneItem = ListTemplate.bind({});
+OneItem.args = {
+  items: [
+    {
+      ...Unchecked.args,
+    },
+  ],
 };
-
-export const Empty = {
-  ...ListTemplate,
-  args: { items: [] },
-};
-
-export const OneItem = {
-  ...ListTemplate,
-  args: {
-    items: [{ ...Unchecked.args }],
-  },
-};
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/angular/list-story-unchecked.ts.mdx b/docs/snippets/angular/list-story-unchecked.ts.mdx
index 6212756dd8a..b51b7ab7d74 100644
--- a/docs/snippets/angular/list-story-unchecked.ts.mdx
+++ b/docs/snippets/angular/list-story-unchecked.ts.mdx
@@ -1,7 +1,7 @@
 ```ts
 // List.stories.ts
 
-import { moduleMetadata } from '@storybook/angular';
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
 
 import { CommonModule } from '@angular/common';
 
@@ -12,26 +12,31 @@ import { ListItem } from './list-item.component';
 import { Unchecked } from './ListItem.stories';
 
 export default {
+   /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
   component: List,
   decorators: [
     moduleMetadata({
-      declarations: [ListItem],
+      declarations: [List, ListItem],
       imports: [CommonModule],
     }),
   ],
-};
+} as Meta;
 
-export const OneItem = {
-  args: {
-    ...Unchecked.args,
-  },
-  render: (args) => ({
-    props: args,
-    template: `
-      <list>
-        <list-item [item]="item"></list-item>
-      </list>
-   `,
-  }),
+
+export const OneItem: Story = (args) => ({
+  props: args,
+  template: `
+    <app-list>
+        <app-list-item [item]="item"></app-list-item>
+    </app-list>
+  `,
+});
+
+OneItem.args = {
+   ...Unchecked.args,
 };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/angular/list-story-with-subcomponents.ts.mdx b/docs/snippets/angular/list-story-with-subcomponents.ts.mdx
index 1c138014c4d..83b42621869 100644
--- a/docs/snippets/angular/list-story-with-subcomponents.ts.mdx
+++ b/docs/snippets/angular/list-story-with-subcomponents.ts.mdx
@@ -1,7 +1,7 @@
 ```ts
 // List.stories.ts
 
-import { moduleMetadata } from '@storybook/angular';
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
 
 import { CommonModule } from '@angular/common';
 
@@ -9,23 +9,35 @@ import { List } from './list.component';
 import { ListItem } from './list-item.component';
 
 export default {
+   /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
   component: List,
   subcomponents: { ListItem }, //👈 Adds the ListItem component as a subcomponent
   decorators: [
     moduleMetadata({
-      declarations: [ListItem],
+      declarations: [List, ListItem],
       imports: [CommonModule],
     }),
   ],
-};
+} as Meta;
 
-export const Empty = {};
+export const Empty: Story = () => ({
+  props: {
+    args,
+  },
+});
 
-export const OneItem = {
-  args: {},
-  render: (args) => ({
-    props: args,
-    template: `<list><list-item></list-item></list>`,
-  }),
-};
-```
+export const OneItem: Story = () => ({
+  props: {
+    args,
+  },
+  template: `
+    <app-list>
+      <app-list-item></app-list-item>
+    </app-list>
+  `,
+});
+```
\ No newline at end of file
diff --git a/docs/snippets/angular/page-story-with-args-composition.ts.mdx b/docs/snippets/angular/page-story-with-args-composition.ts.mdx
index 65f7e80ef40..aac2830a37f 100644
--- a/docs/snippets/angular/page-story-with-args-composition.ts.mdx
+++ b/docs/snippets/angular/page-story-with-args-composition.ts.mdx
@@ -1,7 +1,7 @@
 ```ts
 // YourPage.stories.ts
 
-import { moduleMetadata } from '@storybook/angular';
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
 
 import { CommonModule } from '@angular/common';
 
@@ -16,6 +16,11 @@ import * as DocumentHeaderStories from './DocumentHeader.stories';
 import * as DocumentListStories from './DocumentList.stories';
 
 export default {
+   /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'DocumentScreen',
   component: DocumentScreen,
   decorators: [
     moduleMetadata({
@@ -23,13 +28,17 @@ export default {
       imports: [CommonModule],
     }),
   ],
-};
+} as Meta;
 
-export const Simple = {
-  args: {
-    user: PageLayoutStories.Simple.args.user,
-    document: DocumentHeaderStories.Simple.args.document,
-    subdocuments: DocumentListStories.Simple.args.documents,
-  },
+
+const Template: Story = (args) => ({
+  props: args,
+});
+
+export const Simple = Template.bind({});
+Simple.args = {
+  user: PageLayoutStories.PageLayoutSimple.args.user,
+  document: DocumentHeaderStories.DocumentHeaderSimple.args.document,
+  subdocuments: DocumentListStories.DocumentListSimple.args.documents
 };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/react/app-story-with-mock.js.mdx b/docs/snippets/react/app-story-with-mock.js.mdx
index 1db41b8c588..780bb7d8804 100644
--- a/docs/snippets/react/app-story-with-mock.js.mdx
+++ b/docs/snippets/react/app-story-with-mock.js.mdx
@@ -1,30 +1,36 @@
 ```js
-// App.stories.js | App.stories.jsx | App.stories.ts | App.stories.tsx
+// App.stories.js|jsx
 
 import React from 'react';
 
 import App from './App';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'App',
   component: App,
 };
 
-export const Success = {
-  parameters: {
-    fetch: {
-      json: {
-        JavaScript: 3390991,
-        'C++': 44974,
-        TypeScript: 15530,
-        CoffeeScript: 12253,
-        Python: 9383,
-        C: 5341,
-        Shell: 5115,
-        HTML: 3420,
-        CSS: 3171,
-        Makefile: 189,
-      },
-    },
-  },
+const Template = (ags) => <App />;
+
+export const Success = Template.bind({});
+Success.parameters = {
+  fetch: {
+    json: {
+      JavaScript: 3390991,
+      'C++': 44974,
+      TypeScript: 15530,
+      CoffeeScript: 12253,
+      Python: 9383,
+      C: 5341,
+      Shell: 5115,
+      HTML: 3420,
+      CSS: 3171,
+      Makefile: 189,
+    }
+  }
 };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/react/app-story-with-mock.ts.mdx b/docs/snippets/react/app-story-with-mock.ts.mdx
new file mode 100644
index 00000000000..3d5872b648e
--- /dev/null
+++ b/docs/snippets/react/app-story-with-mock.ts.mdx
@@ -0,0 +1,38 @@
+```ts
+// App.stories.ts|tsx
+
+import React from 'react';
+
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import App from './App';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'App',
+  component: App,
+} as ComponentMeta<typeof App>;
+
+const Template: ComponentStory<typeof App> = () => <App />;
+
+export const Success = Template.bind({});
+Success.parameters = {
+  fetch: {
+    json: {
+      JavaScript: 3390991,
+      'C++': 44974,
+      TypeScript: 15530,
+      CoffeeScript: 12253,
+      Python: 9383,
+      C: 5341,
+      Shell: 5115,
+      HTML: 3420,
+      CSS: 3171,
+      Makefile: 189,
+    }
+  }
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/react/documentscreen-story-msw-graphql-query.js.mdx b/docs/snippets/react/documentscreen-story-msw-graphql-query.js.mdx
index 1a3af4b7167..2bbd7534880 100644
--- a/docs/snippets/react/documentscreen-story-msw-graphql-query.js.mdx
+++ b/docs/snippets/react/documentscreen-story-msw-graphql-query.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// YourPage.stories.js | YourPage.stories.jsx | YourPage.stories.ts | YourPage.stories.tsx
+// YourPage.stories.js|jsx|ts|tsx
 
 import React from 'react';
 
@@ -10,6 +10,11 @@ import { graphql } from 'msw';
 import { DocumentScreen } from './YourPage';
 
 export default {
+   /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'DocumentScreen',
   component: DocumentScreen,
 };
 
@@ -77,40 +82,34 @@ const TestData = {
   ],
 };
 
-export const MockedSuccess = {
-  parameters: {
-    msw: [
-      graphql.query('AllInfoQuery', (req, res, ctx) => {
-        return res(ctx.data(TestData));
-      }),
-    ],
-  },
-  render: () => (
-    <ApolloProvider client={mockedClient}>
-      <DocumentScreen />
-    </ApolloProvider>
-  ),
+const PageTemplate = () => (
+  <ApolloProvider client={mockedClient}>
+    <DocumentScreen />
+  </ApolloProvider>
+);
+
+export const MockedSuccess = PageTemplate.bind({});
+MockedSuccess.parameters = {
+  msw: [
+    graphql.query('AllInfoQuery', (req, res, ctx) => {
+      return res(ctx.data(TestData));
+    }),
+  ],
 };
 
-export const MockedError = {
-  parameters: {
-    msw: [
-      graphql.query('AllInfoQuery', (req, res, ctx) => {
-        return res(
-          ctx.delay(800),
-          ctx.errors([
-            {
-              message: 'Access denied',
-            },
-          ])
-        );
-      }),
-    ],
-  },
-  render: () => (
-    <ApolloProvider client={mockedClient}>
-      <DocumentScreen />
-    </ApolloProvider>
-  ),
+export const MockedError = PageTemplate.bind({});
+MockedError.parameters = {
+  msw: [
+    graphql.query('AllInfoQuery', (req, res, ctx) => {
+      return res(
+        ctx.delay(800),
+        ctx.errors([
+          {
+            message: 'Access denied',
+          },
+        ])
+      );
+    }),
+  ],
 };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/react/documentscreen-story-msw-rest-request.js.mdx b/docs/snippets/react/documentscreen-story-msw-rest-request.js.mdx
index fba25c10521..0a319d6c2be 100644
--- a/docs/snippets/react/documentscreen-story-msw-rest-request.js.mdx
+++ b/docs/snippets/react/documentscreen-story-msw-rest-request.js.mdx
@@ -1,11 +1,18 @@
 ```js
-// YourPage.stories.js | YourPage.stories.jsx | YourPage.stories.ts | YourPage.stories.tsx
+// YourPage.stories.js|jsx|ts|tsx
+
+import React from 'react';
 
 import { rest } from 'msw';
 
 import { DocumentScreen } from './YourPage';
 
 export default {
+   /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'DocumentScreen',
   component: DocumentScreen,
 };
 
@@ -58,23 +65,23 @@ const TestData = {
   ],
 };
 
-export const MockedSuccess = {
-  parameters: {
-    msw: [
-      rest.get('https://your-restful-endpoint/', (_req, res, ctx) => {
-        return res(ctx.json(TestData));
-      }),
-    ],
-  },
+const PageTemplate = () => <DocumentScreen />;
+
+export const MockedSuccess = PageTemplate.bind({});
+MockedSuccess.parameters = {
+  msw: [
+    rest.get('https://your-restful-endpoint/', (_req, res, ctx) => {
+      return res(ctx.json(TestData));
+    }),
+  ],
 };
 
-export const MockedError = {
-  parameters: {
-    msw: [
-      rest.get('https://your-restful-endpoint/', (_req, res, ctx) => {
-        return res(ctx.delay(800), ctx.status(403));
-      }),
-    ],
-  },
+export const MockedError = PageTemplate.bind({});
+MockedError.parameters = {
+  msw: [
+    rest.get('https://your-restful-endpoint', (_req, res, ctx) => {
+      return res(ctx.delay(800), ctx.status(403));
+    }),
+  ],
 };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/react/list-story-template.js.mdx b/docs/snippets/react/list-story-template.js.mdx
index a0d111dbde9..34a126afe36 100644
--- a/docs/snippets/react/list-story-template.js.mdx
+++ b/docs/snippets/react/list-story-template.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// List.stories.js | List.stories.jsx
+// List.stories.js|jsx
 
 import React from 'react';
 
@@ -10,33 +10,31 @@ import { ListItem } from './ListItem';
 import { Unchecked } from './ListItem.stories';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
   component: List,
 };
 
-//👇 The ListTemplate construct will be spread to the existing stories.
-const ListTemplate = {
-  render: ({ items, ...args }) => {
-    return (
-      <List>
-        {items.map((item) => (
-          <ListItem {...item} />
-        ))}
-      </List>
-    );
-  },
-};
+const ListTemplate = ({ items, ...args }) => (
+  <List>
+    {items.map((item) => (
+      <ListItem {...item} />
+    ))}
+  </List>
+);
 
-export const Empty = {
-  ...ListTemplate,
-  args: {
-    items: [],
-  },
-};
+export const Empty = ListTemplate.bind({});
+Empty.args = { items: [] };
 
-export const OneItem = {
-  ...ListTemplate,
-  args: {
-    items: [Unchecked.args],
-  },
+export const OneItem = ListTemplate.bind({});
+OneItem.args = {
+  items: [
+    {
+      ...Unchecked.args,
+    },
+  ],
 };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/react/list-story-template.ts.mdx b/docs/snippets/react/list-story-template.ts.mdx
index 9e0f4aa2ec2..19e3e53af1d 100644
--- a/docs/snippets/react/list-story-template.ts.mdx
+++ b/docs/snippets/react/list-story-template.ts.mdx
@@ -1,25 +1,43 @@
 ```js
-// List.stories.ts | List.stories.tsx
+// List.stories.ts|tsx
 
 import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
 
-import { List, ListProps } from './List';
-import { ListItem, ListItemProps } from './ListItem';
+import { List } from './List';
+import { ListItem } from './ListItem';
 
 //👇 Imports a specific story from ListItem stories
 import { Unchecked } from './ListItem.stories';
 
-const ListTemplate = ({ items, ...args }) => (
-  <List>
-    {items.map((item) => (
-      <ListItem {...item} />
-    ))}
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
+  component: List,
+} as ComponentMeta<typeof List>;
+
+const ListTemplate: ComponentStory<typeof ButtonGroup> = (args) => {
+  const { items } = args;
+  return (
+    <List>
+      {items.map((item) => (
+        <ListItem {...item} />
+      ))}
   </List>
-);
+)};
 
 export const Empty = ListTemplate.bind({});
 Empty.args = { items: [] };
 
 export const OneItem = ListTemplate.bind({});
-OneItem.args = { items: [Unchecked.args] };
+OneItem.args = {
+  items: [
+    {
+      ...Unchecked.args,
+    },
+  ],
+};
 ```
\ No newline at end of file
diff --git a/docs/snippets/react/list-story-unchecked.js.mdx b/docs/snippets/react/list-story-unchecked.js.mdx
index 77940e9e559..af93940943f 100644
--- a/docs/snippets/react/list-story-unchecked.js.mdx
+++ b/docs/snippets/react/list-story-unchecked.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// List.stories.js | List.stories.jsx
+// List.stories.js|jsx
 
 import React from 'react';
 
@@ -9,6 +9,11 @@ import { List } from './List';
 import { Unchecked } from './ListItem.stories';
 
 export default {
+   /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
   component: List,
 };
 
diff --git a/docs/snippets/react/list-story-unchecked.ts.mdx b/docs/snippets/react/list-story-unchecked.ts.mdx
index d5de8e752d7..ceeb1643f72 100644
--- a/docs/snippets/react/list-story-unchecked.ts.mdx
+++ b/docs/snippets/react/list-story-unchecked.ts.mdx
@@ -1,14 +1,25 @@
 ```ts
-// List.stories.ts | List.stories.tsx
+// List.stories.ts|tsx
 
 import React from 'react';
 
-import { List, ListProps } from './List';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { List } from './List';
 
 //👇 Instead of importing ListItem, we import the stories
 import { Unchecked } from './ListItem.stories';
 
-export const OneItem = (args) => (
+export default {
+   /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
+  component: List,
+} as ComponentMeta<typeof List>;
+
+const OneItem: ComponentStory<typeof List> = (args) => (
   <List {...args}>
     <Unchecked {...Unchecked.args} />
   </List>
diff --git a/docs/snippets/react/list-story-with-subcomponents.js.mdx b/docs/snippets/react/list-story-with-subcomponents.js.mdx
index a5473b264c2..f381f764fc6 100644
--- a/docs/snippets/react/list-story-with-subcomponents.js.mdx
+++ b/docs/snippets/react/list-story-with-subcomponents.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// List.stories.js | List.stories.jsx
+// List.stories.js|jsx
 
 import React from 'react';
 
@@ -7,17 +7,20 @@ import { List } from './List';
 import { ListItem } from './ListItem';
 
 export default {
+   /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
   component: List,
   subcomponents: { ListItem }, //👈 Adds the ListItem component as a subcomponent
 };
 
-export const Empty = {};
+export const Empty = (args) => <List {...args} />;
 
-export const OneItem = {
-  render: (args) => (
-    <List {...args}>
-      <ListItem />
-    </List>
-  ),
-};
-```
+export const OneItem = (args) => (
+  <List {...args}>
+    <ListItem />
+  </List>
+);
+```
\ No newline at end of file
diff --git a/docs/snippets/react/list-story-with-subcomponents.ts.mdx b/docs/snippets/react/list-story-with-subcomponents.ts.mdx
index 4ceb909024b..e7b22ff8d4b 100644
--- a/docs/snippets/react/list-story-with-subcomponents.ts.mdx
+++ b/docs/snippets/react/list-story-with-subcomponents.ts.mdx
@@ -3,20 +3,25 @@
 
 import React from 'react';
 
-import { Story, Meta } from '@storybook/react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
 
 import { List, ListProps } from './List';
 import { ListItem, ListItemProps } from './ListItem';
 
 export default {
+   /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
   component: List,
   subcomponents: { ListItem }, //👈 Adds the ListItem component as a subcomponent
   title: 'List',
-} as Meta;
+} as ComponentMeta<typeof List>;
 
-export const Empty: Story<ListProps> = (args) => <List {...args} />;
+const Empty: ComponentStory<typeof List> = (args) => <ButtonGroup {...args} />;
 
-export const OneItem = (args) => (
+const OneItem: ComponentStory<typeof List> = (args) =>(
   <List {...args}>
     <ListItem />
   </List>
diff --git a/docs/snippets/react/list-story-with-unchecked-children.js.mdx b/docs/snippets/react/list-story-with-unchecked-children.js.mdx
index e24df45dbfd..07c1352375c 100644
--- a/docs/snippets/react/list-story-with-unchecked-children.js.mdx
+++ b/docs/snippets/react/list-story-with-unchecked-children.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// List.stories.js | List.stories.jsx
+// List.stories.js|jsx
 
 import React from 'react';
 
@@ -9,8 +9,14 @@ import { List } from './List';
 import { Unchecked } from './ListItem.stories';
 
 export default {
+   /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
   component: List,
 };
+
 const Template = (args) => <List {...args} />;
 
 export const OneItem = Template.bind({});
diff --git a/docs/snippets/react/list-story-with-unchecked-children.ts.mdx b/docs/snippets/react/list-story-with-unchecked-children.ts.mdx
index 628e57ec1eb..6b25c195ad0 100644
--- a/docs/snippets/react/list-story-with-unchecked-children.ts.mdx
+++ b/docs/snippets/react/list-story-with-unchecked-children.ts.mdx
@@ -1,14 +1,25 @@
 ```ts
-// List.stories.ts | List.stories.tsx
+// List.stories.ts|tsx
 
 import React from 'react';
 
-import { List, ListProps } from './List';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { List } from './List';
 
 //👇 Instead of importing ListItem, we import the stories
 import { Unchecked } from './ListItem.stories';
 
-const Template: Story<ListProps> = (args) => <List {...args} />;
+export default {
+   /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
+  component: List,
+} as ComponentMeta<typeof List>;
+
+const Template: ComponentStory<typeof List> = (args) => <List {...args} />;
 
 export const OneItem = Template.bind({});
 OneItem.args = {
diff --git a/docs/snippets/react/mock-context-container-provider.js.mdx b/docs/snippets/react/mock-context-container-provider.js.mdx
index d8efa6517b7..05eef3eaac3 100644
--- a/docs/snippets/react/mock-context-container-provider.js.mdx
+++ b/docs/snippets/react/mock-context-container-provider.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// pages/profile.js | pages/profile.jsx
+// pages/profile.js|jsx
 
 import React from 'react';
 
diff --git a/docs/snippets/react/mock-context-container.js.mdx b/docs/snippets/react/mock-context-container.js.mdx
index 7195095dd72..105b1e40bb8 100644
--- a/docs/snippets/react/mock-context-container.js.mdx
+++ b/docs/snippets/react/mock-context-container.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// ProfilePage.stories.js | ProfilePage.stories.jsx
+// ProfilePage.stories.js|jsx
 
 import React from 'react';
 
@@ -10,6 +10,11 @@ import { UserPosts } from './UserPosts';
 import { normal as UserFriendsNormal } from './UserFriends.stories';
 
 export default {
+   /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'ProfilePage',
   component: ProfilePage,
 };
 
@@ -29,11 +34,11 @@ const context = {
   UserFriendsContainer: UserFriendsNormal,
 };
 
-export const Normal = {
-  render: () => (
+export const normal = () => {
+  return (
     <ProfilePageContext.Provider value={context}>
       <ProfilePage {...ProfilePageProps} />
     </ProfilePageContext.Provider>
-  ),
+  );
 };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/react/mock-context-in-use.js.mdx b/docs/snippets/react/mock-context-in-use.js.mdx
index 22f02c324b8..a2b9fb8bbf5 100644
--- a/docs/snippets/react/mock-context-in-use.js.mdx
+++ b/docs/snippets/react/mock-context-in-use.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// ProfilePage.js | ProfilePage.jsx
+// ProfilePage.js|jsx
 
 import { useContext } from 'react';
 
diff --git a/docs/snippets/react/page-story-with-args-composition.js.mdx b/docs/snippets/react/page-story-with-args-composition.js.mdx
index abf8f61285e..8d31532b17f 100644
--- a/docs/snippets/react/page-story-with-args-composition.js.mdx
+++ b/docs/snippets/react/page-story-with-args-composition.js.mdx
@@ -1,5 +1,7 @@
 ```js
-// YourPage.stories.js | YourPage.stories.jsx
+// YourPage.stories.js|jsx
+
+import React from 'react';
 
 import { DocumentScreen } from './YourPage';
 
@@ -9,14 +11,20 @@ import * as DocumentHeader from './DocumentHeader.stories';
 import * as DocumentList from './DocumentList.stories';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'DocumentScreen',
   component: DocumentScreen,
 };
 
-export const Simple = {
-  args: {
-    user: PageLayout.Simple.args.user,
-    document: DocumentHeader.Simple.args.document,
-    subdocuments: DocumentList.Simple.args.documents,
-  },
+const Template = (args) => <DocumentScreen {...args} />;
+
+export const Simple = Template.bind({});
+Simple.args = {
+  user: PageLayout.Simple.args.user,
+  document: DocumentHeader.Simple.args.document,
+  subdocuments: DocumentList.Simple.args.documents,
 };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/react/page-story-with-args-composition.ts.mdx b/docs/snippets/react/page-story-with-args-composition.ts.mdx
index 3344cc1eccc..7f5f896a0fc 100644
--- a/docs/snippets/react/page-story-with-args-composition.ts.mdx
+++ b/docs/snippets/react/page-story-with-args-composition.ts.mdx
@@ -1,21 +1,28 @@
 ```ts
-// YourPage.stories.ts | YourPage.stories.tsx
+// YourPage.stories.ts|tsx
 
 import React from 'react';
 
-import { Story, Meta } from '@storybook/react';
-import { DocumentScreen, DocumentScreenProps } from './YourPage';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { DocumentScreen } from './YourPage';
 
 import PageLayout from './PageLayout.stories';
 import DocumentHeader from './DocumentHeader.stories';
 import DocumentList from './DocumentList.stories';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'DocumentScreen',
   component: DocumentScreen,
   title: 'DocumentScreen',
-} as Meta;
+} as ComponentMeta<typeof DocumentScreen>;
 
-const Template: Story<DocumentScreenProps> = (args) => <DocumentScreen {...args} />;
+
+const Template: ComponentStory<typeof DocumentScreen> = (args) => <DocumentScreen {...args} />;
 
 export const Simple = Template.bind({});
 Simple.args = {
diff --git a/docs/snippets/svelte/documentscreen-story-msw-graphql-query.js.mdx b/docs/snippets/svelte/documentscreen-story-msw-graphql-query.js.mdx
index 738b413bd03..de4abee3c52 100644
--- a/docs/snippets/svelte/documentscreen-story-msw-graphql-query.js.mdx
+++ b/docs/snippets/svelte/documentscreen-story-msw-graphql-query.js.mdx
@@ -7,6 +7,11 @@ import DocumentScreen from './YourPage.svelte';
 import MockApolloWrapperClient from './MockApolloWrapperClient.svelte';
 
 export default {
+   /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'DocumentScreen',
   component: DocumentScreen,
   decorators: [() => MockGraphqlProvider],
 };
@@ -60,38 +65,31 @@ const TestData = {
   ],
 };
 
-export const MockedSuccess = {
-  parameters: {
-    msw: [
-      graphql.query('AllInfoQuery', (req, res, ctx) => {
-        return res(ctx.data(TestData));
-      }),
-    ],
-  },
-  render: (args) => ({
-    Component: DocumentScreen,
-    props: args,
-  }),
-};
+const PageTemplate = () => ({
+  Component: DocumentScreen,
+});
 
-export const MockedError = {
-  parameters: {
-    msw: [
-      graphql.query('AllInfoQuery', (req, res, ctx) => {
-        return res(
-          ctx.delay(800),
-          ctx.errors([
-            {
-              message: 'Access denied',
-            },
-          ])
-        );
-      }),
-    ],
-  },
-  render: (args) => ({
-    Component: DocumentScreen,
-    props: args,
-  }),
+export const MockedSuccess = PageTemplate.bind({});
+MockedSuccess.parameters = {
+  msw: [
+    graphql.query('AllInfoQuery', (req, res, ctx) => {
+      return res(ctx.data(TestData));
+    }),
+  ],
 };
-```
+export const MockedError = PageTemplate.bind({});
+MockedError.parameters = {
+  msw: [
+    graphql.query('AllInfoQuery', (req, res, ctx) => {
+      return res(
+        ctx.delay(800),
+        ctx.errors([
+          {
+            message: 'Access denied',
+          },
+        ])
+      );
+    }),
+  ],
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/svelte/documentscreen-story-msw-rest-request.js.mdx b/docs/snippets/svelte/documentscreen-story-msw-rest-request.js.mdx
index f6232b6814d..273f796e901 100644
--- a/docs/snippets/svelte/documentscreen-story-msw-rest-request.js.mdx
+++ b/docs/snippets/svelte/documentscreen-story-msw-rest-request.js.mdx
@@ -6,6 +6,11 @@ import DocumentScreen from './YourPage.svelte';
 import { rest } from 'msw';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'DocumentScreen',
   component: DocumentScreen,
 };
 
@@ -58,31 +63,25 @@ const TestData = {
   ],
 };
 
-export const MockedSuccess = {
-  parameters: {
-    msw: [
-      rest.get('https://your-restful-endpoint', (_req, res, ctx) => {
-        return res(ctx.json(TestData));
-      }),
-    ],
-  },
-  render: (args) => ({
-    Component: DocumentScreen,
-    props: args,
-  }),
+const PageTemplate = () => ({
+  Component: DocumentScreen,
+});
+
+export const MockedSuccess = PageTemplate.bind({});
+MockedSuccess.parameters = {
+  msw: [
+    rest.get('https://your-restful-endpoint', (_req, res, ctx) => {
+      return res(ctx.json(TestData));
+    }),
+  ],
 };
 
-export const MockedError = {
-  parameters: {
-    msw: [
-      rest.get('https://your-restful-endpoint', (_req, res, ctx) => {
-        return res(ctx.delay(800), ctx.status(403));
-      }),
-    ],
-  },
-  render: (args) => ({
-    Component: DocumentScreen,
-    props: args,
-  }),
+export const MockedError = PageTemplate.bind({});
+MockedError.parameters = {
+  msw: [
+    rest.get('https://your-restful-endpoint', (_req, res, ctx) => {
+      return res(ctx.delay(800), ctx.status(403));
+    }),
+  ],
 };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/svelte/page-story-with-args-composition.js.mdx b/docs/snippets/svelte/page-story-with-args-composition.js.mdx
index 33661816ec4..5cf1d6fa24d 100644
--- a/docs/snippets/svelte/page-story-with-args-composition.js.mdx
+++ b/docs/snippets/svelte/page-story-with-args-composition.js.mdx
@@ -9,18 +9,24 @@ import * as DocumentHeaderStories from './DocumentHeader.stories';
 import * as DocumentListStories from './DocumentList.stories';
 
 export default {
+   /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'DocumentScreen',
   component: DocumentScreen,
 };
 
-export const Simple = {
-  args: {
-    user: PageLayoutStories.Simple.args.user,
-    document: DocumentHeaderStories.Simple.args.document,
-    subdocuments: DocumentListStories.Simple.args.documents,
-  },
-  render: (args) => ({
-    Components: DocumentScreen,
-    props: args,
-  }),
+
+const Template = (args) => ({
+  component: DocumentScreen,
+  props: args,
+});
+
+export const SimplePage = Template.bind({});
+SimplePage.args = {
+  user: PageLayoutStories.Simple.args.user,
+  document: DocumentHeaderStories.Simple.args.document,
+  subdocuments: DocumentListStories.Simple.args.documents,
 };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/app-story-with-mock.2.js.mdx b/docs/snippets/vue/app-story-with-mock.2.js.mdx
deleted file mode 100644
index 07eae199aed..00000000000
--- a/docs/snippets/vue/app-story-with-mock.2.js.mdx
+++ /dev/null
@@ -1,33 +0,0 @@
-```js
-// App.stories.js
-
-import App from './App.vue';
-
-export default {
-  component: App,
-};
-
-export const Success = {
-  parameters: {
-    fetch: {
-      json: {
-        JavaScript: 3390991,
-        'C++': 44974,
-        TypeScript: 15530,
-        CoffeeScript: 12253,
-        Python: 9383,
-        C: 5341,
-        Shell: 5115,
-        HTML: 3420,
-        CSS: 3171,
-        Makefile: 189,
-      },
-    },
-  },
-  render: (args) => ({
-    props: Object.keys(argTypes),
-    components: { App },
-    template: '<App v-bind="$props"/>',
-  }),
-};
-```
diff --git a/docs/snippets/vue/app-story-with-mock.3.js.mdx b/docs/snippets/vue/app-story-with-mock.3.js.mdx
deleted file mode 100644
index 9221c912387..00000000000
--- a/docs/snippets/vue/app-story-with-mock.3.js.mdx
+++ /dev/null
@@ -1,35 +0,0 @@
-```js
-// App.stories.js
-
-import App from './App.vue';
-
-export default {
-  component: App,
-};
-
-export const Success = {
-  parameters: {
-    fetch: {
-      json: {
-        JavaScript: 3390991,
-        'C++': 44974,
-        TypeScript: 15530,
-        CoffeeScript: 12253,
-        Python: 9383,
-        C: 5341,
-        Shell: 5115,
-        HTML: 3420,
-        CSS: 3171,
-        Makefile: 189,
-      },
-    },
-  },
-  render: (args) => ({
-    components: { App },
-    setup() {
-      return { args };
-    },
-    template: '<App v-bind="args" />',
-  }),
-};
-```
diff --git a/docs/snippets/vue/app-story-with-mock.js.mdx b/docs/snippets/vue/app-story-with-mock.js.mdx
new file mode 100644
index 00000000000..92d838554d9
--- /dev/null
+++ b/docs/snippets/vue/app-story-with-mock.js.mdx
@@ -0,0 +1,38 @@
+```js
+// App.stories.js
+
+import App from './App.vue';
+
+export default {
+   /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'App',
+  component: App,
+};
+
+
+const Template = () => ({
+  components: { App },
+  template: '<App />',
+});
+
+export const Success = Template.bind({});
+Success.parameters = {
+  fetch: {
+    json: {
+      JavaScript: 3390991,
+      "C++": 44974,
+      TypeScript: 15530,
+      CoffeeScript: 12253,
+      Python: 9383,
+      C: 5341,
+      Shell: 5115,
+      HTML: 3420,
+      CSS: 3171,
+      Makefile: 189
+    }
+  }
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/documentscreen-story-msw-graphql-query.3.js.mdx b/docs/snippets/vue/documentscreen-story-msw-graphql-query.3.js.mdx
index 94a13a7eb69..12fa838e921 100644
--- a/docs/snippets/vue/documentscreen-story-msw-graphql-query.3.js.mdx
+++ b/docs/snippets/vue/documentscreen-story-msw-graphql-query.3.js.mdx
@@ -8,6 +8,11 @@ import WrapperComponent from './ApolloWrapperClient.vue';
 import { graphql } from 'msw';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'DocumentScreen',
   component: DocumentScreen,
 };
 
@@ -60,44 +65,37 @@ const TestData = {
   ],
 };
 
-export const MockedSuccess = {
-  parameters: {
-    msw: [
-      graphql.query('AllInfoQuery', (req, res, ctx) => {
-        return res(ctx.data(TestData));
-      }),
-    ],
-  },
-  render: (args) => ({
-    components: { DocumentScreen, WrapperComponent },
-    setup() {
-      return { args };
-    },
-    template: '<WrapperComponent><DocumentScreen v-bind="args"/></WrapperComponent>',
-  }),
+const PageTemplate = () => ({
+  components: { DocumentScreen, WrapperComponent },
+  template: `
+    <WrapperComponent>
+      <SampleGraphqlComponent />
+    </WrapperComponent>
+  `,
+});
+
+export const MockedSuccess = PageTemplate.bind({});
+MockedSuccess.parameters = {
+  msw: [
+    graphql.query('AllInfoQuery', (req, res, ctx) => {
+      return res(ctx.data(TestData));
+    }),
+  ],
 };
 
-export const MockedError = {
-  parameters: {
-    msw: [
-      graphql.query('AllInfoQuery', (req, res, ctx) => {
-        return res(
-          ctx.delay(800),
-          ctx.errors([
-            {
-              message: 'Access denied',
-            },
-          ])
-        );
-      }),
-    ],
-  },
-  render: (args) => ({
-    components: { DocumentScreen, WrapperComponent },
-    setup() {
-      return { args };
-    },
-    template: '<WrapperComponent><DocumentScreen v-bind="args"/></WrapperComponent>',
-  }),
+export const MockedError = PageTemplate.bind({});
+MockedError.parameters = {
+  msw: [
+    graphql.query('AllInfoQuery', (req, res, ctx) => {
+      return res(
+        ctx.delay(800),
+        ctx.errors([
+          {
+            message: 'Access denied',
+          },
+        ])
+      );
+    }),
+  ],
 };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/documentscreen-story-msw-rest-request.3.js.mdx b/docs/snippets/vue/documentscreen-story-msw-rest-request.3.js.mdx
index c0a4ff6c59a..00adbd54004 100644
--- a/docs/snippets/vue/documentscreen-story-msw-rest-request.3.js.mdx
+++ b/docs/snippets/vue/documentscreen-story-msw-rest-request.3.js.mdx
@@ -6,6 +6,11 @@ import { rest } from 'msw';
 import DocumentScreen from './YourPage.vue';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'DocumentScreen',
   component: DocumentScreen,
 };
 
@@ -58,37 +63,26 @@ const TestData = {
   ],
 };
 
-export const MockedSuccess = {
-  parameters: {
-    msw: [
-      rest.get('https://your-restful-endpoint/', (_req, res, ctx) => {
-        return res(ctx.json(TestData));
-      }),
-    ],
-  },
-  render: (args) => ({
-    components: { DocumentScreen },
-    setup() {
-      return { args };
-    },
-    template: '<DocumentScreen v-bind="args" />',
-  }),
+const PageTemplate = () => ({
+  components: { DocumentScreen },
+  template: '<DocumentScreen />',
+});
+
+export const MockedSuccess = PageTemplate.bind({});
+MockedSuccess.parameters = {
+  msw: [
+    rest.get('https://your-restful-endpoint/', (_req, res, ctx) => {
+      return res(ctx.json(TestData));
+    }),
+  ],
 };
 
-export const MockedError = {
-  parameters: {
-    msw: [
-      rest.get('https://your-restful-endpoint/', (_req, res, ctx) => {
-        return res(ctx.delay(800), ctx.status(403));
-      }),
-    ],
-  },
-  render: (args) => ({
-    components: { DocumentScreen },
-    setup() {
-      return { args };
-    },
-    template: '<DocumentScreen v-bind="args" />',
-  }),
+export const MockedError = PageTemplate.bind({});
+MockedError.parameters = {
+  msw: [
+    rest.get('https://your-restful-endpoint/', (_req, res, ctx) => {
+      return res(ctx.delay(800), ctx.status(403));
+    }),
+  ],
 };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-template.2.js.mdx b/docs/snippets/vue/list-story-template.2.js.mdx
index 127cc382ca4..2b8c9f006fb 100644
--- a/docs/snippets/vue/list-story-template.2.js.mdx
+++ b/docs/snippets/vue/list-story-template.2.js.mdx
@@ -8,10 +8,14 @@ import ListItem from './ListItem.vue';
 import { Unchecked } from './ListItem.stories';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
   component: List,
 };
 
-//👇 The ListTemplate construct will be spread to the existing stories.
 const ListTemplate = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { List, ListItem },
@@ -21,24 +25,20 @@ const ListTemplate = (args, { argTypes }) => ({
         <ListItem :item="item" />
       </div>
     </List>
-    `,
+  `,
 });
 
-export const Empty = {
-  ...ListTemplate,
-  args: {
-    items: [],
-  },
+export const Empty = ListTemplate.bind({});
+EmptyListTemplate.args = {
+  items: [],
 };
 
-export const OneItem = {
-  ...ListTemplate,
-  args: {
-    items: [
-      {
-        ...Unchecked.args,
-      },
-    ],
-  },
+export const OneItem = ListTemplate.bind({});
+OneItem.args = {
+  items: [
+    {
+      ...Unchecked.args,
+    },
+  ],
 };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-template.3.js.mdx b/docs/snippets/vue/list-story-template.3.js.mdx
index f44676e5088..21fec4654d9 100644
--- a/docs/snippets/vue/list-story-template.3.js.mdx
+++ b/docs/snippets/vue/list-story-template.3.js.mdx
@@ -8,45 +8,39 @@ import ListItem from './ListItem.vue';
 import { Unchecked } from './ListItem.stories';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
   component: List,
 };
 
-//👇 The ListTemplate construct will be spread to the existing stories.
-export const ListTemplate = {
-  render: (args) => ({
-    components: { List, ListItem },
-    setup() {
-      return { ...args };
-    },
-    template: `
-      <List v-bind="args">
-        <div v-for="item in items" :key="item.title">
-          <ListItem :item="item"/>
-        </div>
-      </List>
-    `,
-  }),
-};
-
-export const Empty = {
-  ...ListTemplate,
-  args: {
-    items: [],
+const ListTemplate = (args) => ({
+  components: { List, ListItem },
+  setup() {
+    return { args };
   },
-};
+  template: `
+    <List v-bind="args">
+      <div v-for="item in items" :key="item.title">
+        <ListItem :item="item"/>
+      </div>
+    </List>
+  `,
+});
+
 export const Empty = ListTemplate.bind({});
 Empty.args = {
   items: [],
 };
 
-export const OneItem = {
-  ...ListTemplate,
-  args: {
-    items: [
-      {
-        ...Unchecked.args,
-      },
-    ],
-  },
+export const OneItem = ListTemplate.bind({});
+OneItem.args = {
+  items: [
+    {
+      ...Unchecked.args,
+    },
+  ],
 };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-unchecked.2.js.mdx b/docs/snippets/vue/list-story-unchecked.2.js.mdx
index 537ab5c844c..da6221489c6 100644
--- a/docs/snippets/vue/list-story-unchecked.2.js.mdx
+++ b/docs/snippets/vue/list-story-unchecked.2.js.mdx
@@ -8,17 +8,24 @@ import ListItem from './ListItem.vue';
 import { Unchecked } from './ListItem.stories';
 
 export default {
+   /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
   component: List,
 };
 
-export const OneItem = {
-  args: {
-    ...Unchecked.args,
-  },
-  render: (args, { argTypes }) => ({
-    props: Object.keys(argTypes),
-    components: { List, ListItem },
-    template: '<List v-bind="$props"><ListItem v-bind="$props"/></List>',
-  }),
+export const OneItem = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { List, ListItem },
+  template: `
+    <List v-bind="$props">
+      <ListItem v-bind="$props"/>
+    </List>
+  `,
+});
+OneItem.args = {
+  ...Unchecked.args,
 };
 ```
diff --git a/docs/snippets/vue/list-story-unchecked.3.js.mdx b/docs/snippets/vue/list-story-unchecked.3.js.mdx
index 47886a5788a..187c42354b7 100644
--- a/docs/snippets/vue/list-story-unchecked.3.js.mdx
+++ b/docs/snippets/vue/list-story-unchecked.3.js.mdx
@@ -8,20 +8,34 @@ import ListItem from './ListItem.vue';
 import { Unchecked } from './ListItem.stories';
 
 export default {
+   /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
   component: List,
 };
+// List.stories.js
 
-export const OneItem = {
-  args: {
-    ...Unchecked.args,
+import List from './List.vue';
+import ListItem from './ListItem.vue';
+
+//👇 Imports a specific story from ListItem stories
+import { Unchecked } from './ListItem.stories';
+
+export const OneItem = (args) => ({
+  components: { List, ListItem },
+  setup() {
+    //👇 The args will now be passed down to the template
+    return { args };
   },
-  render: (args) => ({
-    components: { List, ListItem },
-    setup() {
-      //👇 The args will now be passed down to the template
-      return { args };
-    },
-    template: '<List v-bind="args"><ListItem v-bind="args"/></List>',
-  }),
+  template: `
+    <List v-bind="args">
+      <ListItem v-bind="args"/>
+    </List>
+  `,
+});
+OneItem.args = {
+  ...Unchecked.args,
 };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-with-sub-components.2.js.mdx b/docs/snippets/vue/list-story-with-sub-components.2.js.mdx
index cae727d62fe..effc467f4c8 100644
--- a/docs/snippets/vue/list-story-with-sub-components.2.js.mdx
+++ b/docs/snippets/vue/list-story-with-sub-components.2.js.mdx
@@ -5,23 +5,24 @@ import List from './List.vue';
 import ListItem from './ListItem.vue';
 
 export default {
+   /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
   component: List,
   subcomponents: { ListItem }, //👈 Adds the ListItem component as a subcomponent
 };
 
-export const Empty = {
-  render: (args, { argTypes }) => ({
-    props: Object.keys(argTypes),
-    components: { List },
-    template: '<List v-bind="$props"/>',
-  }),
-};
+export const Empty = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { List },
+  template: '<List v-bind="$props"/>',
+});
 
-export const OneItem = {
-  render: (args, { argTypes }) => ({
-    props: Object.keys(argTypes),
-    components: { List, ListItem },
-    template: '<List v-bind="$props"><ListItem /></List>',
-  }),
-};
-```
+export const OneItem = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { List, ListItem },
+  template: '<List v-bind="$props"><ListItem /></List>',
+});
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-with-sub-components.3.js.mdx b/docs/snippets/vue/list-story-with-sub-components.3.js.mdx
index df2f2222911..654b86f1148 100644
--- a/docs/snippets/vue/list-story-with-sub-components.3.js.mdx
+++ b/docs/snippets/vue/list-story-with-sub-components.3.js.mdx
@@ -5,28 +5,30 @@ import List from './List.vue';
 import ListItem from './ListItem.vue';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
   component: List,
   subcomponents: { ListItem }, //👈 Adds the ListItem component as a subcomponent
 };
 
-export const Empty = {
-  render: (args) => ({
-    components: { Button },
-    setup() {
-      return { args };
-    },
-    template: '<List v-bind="args"/>',
-  }),
-};
+export const Empty = (args) => ({
+  components: { List },
+  setup() {
+    //👇 The args will now be passed down to the template
+    return { args };
+  }
+  template: '<List v-bind="args"/>',
+});
 
-export const OneItem = {
-  render: (args) => ({
-    components: { List, ListItem },
-    setup() {
-      //👇 The args will now be passed down to the template
-      return { args };
-    },
-    template: '<List v-bind="args"><ListItem /></List>',
-  }),
-};
-```
+export const OneItem = (args) => ({
+  components: { List, ListItem },
+  setup() {
+    //👇 The args will now be passed down to the template
+    return { args };
+  }
+  template: '<List v-bind="args"><ListItem /></List>',
+});
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/page-story-with-args-composition.2.js.mdx b/docs/snippets/vue/page-story-with-args-composition.2.js.mdx
index 1c086fb0a8b..27d494e2501 100644
--- a/docs/snippets/vue/page-story-with-args-composition.2.js.mdx
+++ b/docs/snippets/vue/page-story-with-args-composition.2.js.mdx
@@ -9,19 +9,24 @@ import * as DocumentHeaderStories from './DocumentHeader.stories';
 import * as DocumentListStories from './DocumentList.stories';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'DocumentScreen',
   component: DocumentScreen,
 };
 
-export const Simple = {
-  args: {
-    user: PageLayoutStories.Simple.args.user,
-    document: DocumentHeaderStories.Simple.args.document,
-    subdocuments: DocumentListStories.Simple.args.documents,
-  },
-  render: (args, { argTypes }) => ({
-    components: { DocumentScreen },
-    props: Object.keys(argTypes),
-    template: '<DocumentScreen v-bind="$props" />',
-  }),
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { DocumentScreen },
+  template: '<DocumentScreen v-bind="$props"/>',
+});
+
+export const Simple = Template.bind({});
+Simple.args = {
+  user: PageLayoutStories.Simple.args.user,
+  document: DocumentHeaderStories.Simple.args.document,
+  subdocuments: DocumentListStories.Simple.args.documents,
 };
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/vue/page-story-with-args-composition.3.js.mdx b/docs/snippets/vue/page-story-with-args-composition.3.js.mdx
index 70f02fa1178..96343f66ebb 100644
--- a/docs/snippets/vue/page-story-with-args-composition.3.js.mdx
+++ b/docs/snippets/vue/page-story-with-args-composition.3.js.mdx
@@ -9,21 +9,26 @@ import * as DocumentHeaderStories from './DocumentHeader.stories';
 import * as DocumentListStories from './DocumentList.stories';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'DocumentScreen',
   component: DocumentScreen,
 };
 
-export const Simple = {
-  args: {
-    user: PageLayoutStories.Simple.args.user,
-    document: DocumentHeaderStories.Simple.args.document,
-    subdocuments: DocumentListStories.Simple.args.documents,
+const Template = (args) => ({
+  components: { DocumentScreen },
+  setup() {
+    return { args };
   },
-  render: (args) => ({
-    components: { DocumentScreen },
-    setup() {
-      return { args };
-    },
-    template: '<DocumentScreen v-bind="args" />',
-  }),
+  template: '<DocumentScreen v-bind="args"/>',
+});
+
+export const Simple = Template.bind({});
+Simple.args = {
+  user: PageLayoutStories.Simple.args.user,
+  document: DocumentHeaderStories.Simple.args.document,
+  subdocuments: DocumentListStories.Simple.args.documents,
 };
-```
+```
\ No newline at end of file
diff --git a/docs/workflows/build-pages-with-storybook.md b/docs/workflows/build-pages-with-storybook.md
index 93b0d7c20f7..f97d885891e 100644
--- a/docs/workflows/build-pages-with-storybook.md
+++ b/docs/workflows/build-pages-with-storybook.md
@@ -205,8 +205,8 @@ Finally, we can set the mock values in a specific story. Let's borrow an example
 <CodeSnippets
   paths={[
     'react/app-story-with-mock.js.mdx',
-    'vue/app-story-with-mock.2.js.mdx',
-    'vue/app-story-with-mock.3.js.mdx',
+    'react/app-story-with-mock.ts.mdx',
+    'vue/app-story-with-mock.js.mdx',
     'angular/app-story-with-mock.ts.mdx',
   ]}
 />
diff --git a/docs/workflows/faq.md b/docs/workflows/faq.md
index b0f07129025..09c58f4037d 100644
--- a/docs/workflows/faq.md
+++ b/docs/workflows/faq.md
@@ -370,4 +370,4 @@ export function isRunningInStorybook() {
   return typeof process?.env?.STORYBOOK !== 'undefined';
   // ReferenceError: process is not defined
 }
-```
+```
\ No newline at end of file