feat: Added vue docgen options for vite builds

code/addons/docs/vue/README.md

@@ -36,24 +36,22 @@ export default {
 
 ## Preset options
 
-The `addon-docs` preset for Vue has a configuration option that can be used to configure [`vue-docgen-api`](https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/packages/vue-docgen-api), a tool which extracts information from Vue components. Here's an example of how to use the preset with options for Vue app:
+The `framework` preset for Vue has a configuration option that can be used to configure [`vue-docgen-api`](https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/packages/vue-docgen-api), a tool which extracts information from Vue components. Here's an example of how to use the preset with options for Vue app:
 
 ```js
 import * as path from 'path';
 
 export default {
-  addons: [
-    {
-      name: '@storybook/addon-docs',
-      options: {
-        vueDocgenOptions: {
-          alias: {
-            '@': path.resolve(__dirname, '../'),
-          },
-        },
-      },
+  framework: {
+    name: '@storybook/vue-vite',
+    options: {
+      docgenOptions: {
+        alias: {
+          '@': path.resolve(__dirname, '../'),
+        }
+      }
     },
-  ],
+  },
 };
 ```
 

code/addons/docs/vue3/README.md

@@ -36,24 +36,22 @@ export default {
 
 ## Preset options
 
-The `addon-docs` preset for Vue has a configuration option that can be used to configure [`vue-docgen-api`](https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/packages/vue-docgen-api), a tool which extracts information from Vue components. Here's an example of how to use the preset with options for Vue app:
+The `framework` preset for Vue has a configuration option that can be used to configure [`vue-docgen-api`](https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/packages/vue-docgen-api), a tool which extracts information from Vue components. Here's an example of how to use the preset with options for Vue app:
 
 ```js
 import * as path from 'path';
 
 export default {
-  addons: [
-    {
-      name: '@storybook/addon-docs',
-      options: {
-        vueDocgenOptions: {
-          alias: {
-            '@': path.resolve(__dirname, '../'),
-          },
-        },
-      },
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {
+      docgenOptions: {
+        alias: {
+          '@': path.resolve(__dirname, '../'),
+        }
+      }
     },
-  ],
+  },
 };
 ```
 

code/frameworks/vue-vite/src/types.ts

@@ -1,11 +1,13 @@
 import type { StorybookConfig as StorybookConfigBase } from '@storybook/types';
 import type { StorybookConfigVite, BuilderOptions } from '@storybook/builder-vite';
+import type { DocGenOptions } from 'vue-docgen-api';
 
 type FrameworkName = '@storybook/vue-vite';
 type BuilderName = '@storybook/builder-vite';
 
 export type FrameworkOptions = {
   builder?: BuilderOptions;
+  docgenOptions?: DocGenOptions;
 };
 
 type StorybookConfigFramework = {

code/frameworks/vue3-vite/src/plugins/vue-docgen.ts

@@ -1,9 +1,9 @@
-import { parse } from 'vue-docgen-api';
+import { DocGenOptions, parse } from 'vue-docgen-api';
 import type { PluginOption } from 'vite';
 import { createFilter } from 'vite';
 import MagicString from 'magic-string';
 
-export function vueDocgen(): PluginOption {
+export function vueDocgen(options?: DocGenOptions): PluginOption {
   const include = /\.(vue)$/;
   const filter = createFilter(include);
 
@@ -13,7 +13,7 @@ export function vueDocgen(): PluginOption {
     async transform(src: string, id: string) {
       if (!filter(id)) return undefined;
 
-      const metaData = await parse(id);
+      const metaData = await parse(id, options);
       const metaSource = JSON.stringify(metaData);
       const s = new MagicString(src);
       s.append(`;_sfc_main.__docgenInfo = ${metaSource}`);

code/frameworks/vue3-vite/src/preset.ts

@@ -22,8 +22,10 @@ export const viteFinal: StorybookConfig['viteFinal'] = async (config, { presets
     plugins.push(vue());
   }
 
+  const framework = await presets.apply<StorybookConfig['framework']>('framework');
+
   // Add docgen plugin
-  plugins.push(vueDocgen());
+  plugins.push(vueDocgen(typeof framework === 'string' ? undefined : framework.options.docgenOptions));
 
   return mergeConfig(config, {
     plugins,

code/frameworks/vue3-vite/src/types.ts

@@ -1,11 +1,13 @@
 import type { StorybookConfig as StorybookConfigBase } from '@storybook/types';
 import type { StorybookConfigVite, BuilderOptions } from '@storybook/builder-vite';
+import type { DocGenOptions } from 'vue-docgen-api';
 
 type FrameworkName = '@storybook/vue3-vite';
 type BuilderName = '@storybook/builder-vite';
 
 export type FrameworkOptions = {
   builder?: BuilderOptions;
+  docgenOptions?: DocGenOptions;
 };
 
 type StorybookConfigFramework = {