feat(vue): storybook configuration generator for vue (#19141)

docs/generated/manifests/menus.json

@@ -1711,6 +1711,14 @@
                 "children": [],
                 "disableCollapsible": false
               },
+              {
+                "name": "Set up Storybook for Vue Projects",
+                "path": "/recipes/storybook/overview-vue",
+                "id": "overview-vue",
+                "isExternal": false,
+                "children": [],
+                "disableCollapsible": false
+              },
               {
                 "name": "Set up Storybook for Angular Projects",
                 "path": "/recipes/storybook/overview-angular",
@@ -2900,6 +2908,14 @@
             "children": [],
             "disableCollapsible": false
           },
+          {
+            "name": "Set up Storybook for Vue Projects",
+            "path": "/recipes/storybook/overview-vue",
+            "id": "overview-vue",
+            "isExternal": false,
+            "children": [],
+            "disableCollapsible": false
+          },
           {
             "name": "Set up Storybook for Angular Projects",
             "path": "/recipes/storybook/overview-angular",
@@ -2991,6 +3007,14 @@
         "children": [],
         "disableCollapsible": false
       },
+      {
+        "name": "Set up Storybook for Vue Projects",
+        "path": "/recipes/storybook/overview-vue",
+        "id": "overview-vue",
+        "isExternal": false,
+        "children": [],
+        "disableCollapsible": false
+      },
       {
         "name": "Set up Storybook for Angular Projects",
         "path": "/recipes/storybook/overview-angular",

docs/generated/manifests/nx.json

@@ -2133,6 +2133,16 @@
             "path": "/recipes/storybook/overview-react",
             "tags": ["storybook"]
           },
+          {
+            "id": "overview-vue",
+            "name": "Set up Storybook for Vue Projects",
+            "description": "This guide explains how to set up Storybook for Vue projects in your Nx workspace.",
+            "file": "shared/recipes/storybook/plugin-vue",
+            "itemList": [],
+            "isExternal": false,
+            "path": "/recipes/storybook/overview-vue",
+            "tags": ["storybook"]
+          },
           {
             "id": "overview-angular",
             "name": "Set up Storybook for Angular Projects",
@@ -3616,6 +3626,16 @@
         "path": "/recipes/storybook/overview-react",
         "tags": ["storybook"]
       },
+      {
+        "id": "overview-vue",
+        "name": "Set up Storybook for Vue Projects",
+        "description": "This guide explains how to set up Storybook for Vue projects in your Nx workspace.",
+        "file": "shared/recipes/storybook/plugin-vue",
+        "itemList": [],
+        "isExternal": false,
+        "path": "/recipes/storybook/overview-vue",
+        "tags": ["storybook"]
+      },
       {
         "id": "overview-angular",
         "name": "Set up Storybook for Angular Projects",
@@ -3731,6 +3751,16 @@
     "path": "/recipes/storybook/overview-react",
     "tags": ["storybook"]
   },
+  "/recipes/storybook/overview-vue": {
+    "id": "overview-vue",
+    "name": "Set up Storybook for Vue Projects",
+    "description": "This guide explains how to set up Storybook for Vue projects in your Nx workspace.",
+    "file": "shared/recipes/storybook/plugin-vue",
+    "itemList": [],
+    "isExternal": false,
+    "path": "/recipes/storybook/overview-vue",
+    "tags": ["storybook"]
+  },
   "/recipes/storybook/overview-angular": {
     "id": "overview-angular",
     "name": "Set up Storybook for Angular Projects",

docs/generated/manifests/tags.json

@@ -892,6 +892,13 @@
       "name": "Set up Storybook for React Projects",
       "path": "/recipes/storybook/overview-react"
     },
+    {
+      "description": "This guide explains how to set up Storybook for Vue projects in your Nx workspace.",
+      "file": "shared/recipes/storybook/plugin-vue",
+      "id": "overview-vue",
+      "name": "Set up Storybook for Vue Projects",
+      "path": "/recipes/storybook/overview-vue"
+    },
     {
       "description": "This guide explains how to set up Storybook for Angular projects in your Nx workspace.",
       "file": "shared/recipes/storybook/plugin-angular",

docs/generated/packages/storybook/documents/overview.md

@@ -53,36 +53,7 @@ You can generate Storybook configuration for an individual project with this com
 nx g @nx/storybook:configuration project-name
 ```
 
-If you are NOT using a framework-specific generator (for [Angular](/nx-api/angular/generators/storybook-configuration), [React](/nx-api/react/generators/storybook-configuration), [React Native](/nx-api/react-native/generators/storybook-configuration)), in the field `uiFramework` you must choose one of the following Storybook frameworks:
-
-- `@storybook/angular`
-- `@storybook/html-webpack5`
-- `@storybook/nextjs`
-- `@storybook/preact-webpack5`
-- `@storybook/react-webpack5`
-- `@storybook/react-vite`
-- `@storybook/server-webpack5`
-- `@storybook/svelte-webpack5`
-- `@storybook/svelte-vite`
-- `@storybook/sveltekit`
-- `@storybook/vue-webpack5`
-- `@storybook/vue-vite`
-- `@storybook/vue3-webpack5`
-- `@storybook/vue3-vite`
-- `@storybook/web-components-webpack5`
-- `@storybook/web-components-vite`
-
-Choosing one of these frameworks will have the following effects on your workspace:
-
-1. Nx will install all the required Storybook packages that go with it.
-
-2. Nx will generate a project-level `.storybook` folder (located under `libs/your-project/.storybook` or `apps/your-project/.storybook`) containing the essential configuration files for Storybook.
-
-3. Nx will create new `targets` in your project's `project.json`, called `storybook` and `build-storybook`, containing all the necessary configuration to serve and build Storybook.
-
-4. Nx will generate a new Cypress e2e app for your project (if there isn't one already) to run against the Storybook instance.
-
-Make sure to **use the framework-specific generators** if your project is using Angular, React, Next.js or React Native: [`@nx/angular:storybook-configuration`](/nx-api/angular/generators/storybook-configuration), [`@nx/react:storybook-configuration`](/nx-api/react/generators/storybook-configuration), [`@nx/react-native:storybook-configuration`](/nx-api/react-native/generators/storybook-configuration):
+or
 
 {% tabs %}
 {% tab label="Angular" %}
@@ -98,6 +69,13 @@ nx g @nx/angular:storybook-configuration my-angular-project
 nx g @nx/react:storybook-configuration my-react-project
 ```
 
+{% /tab %}
+{% tab label="Vue" %}
+
+```shell
+nx g @nx/vue:storybook-configuration my-vue-project
+```
+
 {% /tab %}
 {% tab label="React Native" %}
 
@@ -110,15 +88,36 @@ nx g @nx/react-native:storybook-configuration my-react-native-project
 
 These framework-specific generators will also **generate stories** for you.
 
-### Configure your project using TypeScript
+If you are NOT using a framework-specific generator (for [Angular](/nx-api/angular/generators/storybook-configuration), [React](/nx-api/react/generators/storybook-configuration), [React Native](/nx-api/react-native/generators/storybook-configuration), [Vue](/nx-api/vue/generators/storybook-configuration)), in the field `uiFramework` you must choose one of the following Storybook frameworks:
+
+- `@storybook/angular`
+- `@storybook/html-webpack5`
+- `@storybook/nextjs`
+- `@storybook/preact-webpack5`
+- `@storybook/react-webpack5`
+- `@storybook/react-vite`
+- `@storybook/server-webpack5`
+- `@storybook/svelte-webpack5`
+- `@storybook/svelte-vite`
+- `@storybook/sveltekit`
+- `@storybook/vue-webpack5`
+- `@storybook/vue-vite`
+- `@storybook/vue3-webpack5`
+- `@storybook/vue3-vite`
+- `@storybook/web-components-webpack5`
+- `@storybook/web-components-vite`
+
+Choosing one of these frameworks will have the following effects on your workspace:
 
-You can choose to configure your project using TypeScript instead of JavaScript. To do that, just add the `--tsConfiguration=true` flag to the above command, like this:
+1. Nx will install all the required Storybook packages that go with it.
 
-```shell
-nx g @nx/storybook:configuration project-name --tsConfiguration=true
-```
+2. Nx will generate a project-level `.storybook` folder (located under `libs/your-project/.storybook` or `apps/your-project/.storybook`) containing the essential configuration files for Storybook.
+
+3. Nx will create new `targets` in your project's `project.json`, called `storybook` and `build-storybook`, containing all the necessary configuration to serve and build Storybook.
+
+4. Nx will generate a new Cypress e2e app for your project (if there isn't one already) to run against the Storybook instance.
 
-[Here is the Storybook documentation](https://storybook.js.org/docs/react/configure/overview#configure-your-project-with-typescript) if you want to learn more about configuring your project with TypeScript.
+Make sure to **use the framework-specific generators** if your project is using Angular, React, Next.js or React Native: [`@nx/angular:storybook-configuration`](/nx-api/angular/generators/storybook-configuration), [`@nx/react:storybook-configuration`](/nx-api/react/generators/storybook-configuration), [`@nx/react-native:storybook-configuration`](/nx-api/react-native/generators/storybook-configuration), as shown above.
 
 ### Running Storybook
 
@@ -157,20 +156,20 @@ The project-specific Storybook configuration is pretty much similar to what you
 ```text
 <project root>/
 ├── .storybook/
-│   ├── main.js
-│   ├── preview.js
-│   ├── tsconfig.json
+│   ├── main.ts
+│   └── preview.ts
 ├── src/
 ├── README.md
 ├── tsconfig.json
+├── tsconfig.storybook.json
 └── etc...
 ```
 
 ### Using Addons
 
 To register a [Storybook addon](https://storybook.js.org/addons/) for all Storybook instances in your workspace:
 
-1. In your project's `.storybook/main.js` file, in the `addons` array of the `module.exports` object, add the new addon:
+1. In your project's `.storybook/main.ts` file, in the `addons` array of the `module.exports` object, add the new addon:
 
    ```typescript {% fileName="<project-path>/.storybook/main.js" %}
    module.exports = {
@@ -180,7 +179,7 @@ To register a [Storybook addon](https://storybook.js.org/addons/) for all Storyb
    };
    ```
 
-2. If a decorator is required, in each project's `<project-path>/.storybook/preview.js`, you can export an array called `decorators`.
+2. If a decorator is required, in each project's `<project-path>/.storybook/preview.ts`, you can export an array called `decorators`.
 
    ```typescript {% fileName="<project-path>/.storybook/preview.js" %}
    import someDecorator from 'some-storybook-addon';
@@ -199,6 +198,7 @@ You can find dedicated information for React and Angular:
 
 - [Set up Storybook for Angular Projects](/recipes/storybook/overview-angular)
 - [Set up Storybook for React Projects](/recipes/storybook/overview-react)
+- [Set up Storybook for Vue Projects](/recipes/storybook/overview-vue)
 
 You can find all Storybook-related Nx documentation in the [Storybook recipes section](/recipes/storybook).
 

docs/generated/packages/storybook/generators/configuration.json

@@ -104,7 +104,7 @@
       }
     },
     "required": ["name", "uiFramework"],
-    "examplesFile": "---\ntitle: Storybook configuration generator examples\ndescription: This page contains examples for the @nx/storybook:configuration generator.\n---\n\nThis is a framework-agnostic generator for setting up Storybook configuration for a project.\n\n```bash\nnx g @nx/storybook:configuration\n```\n\nStarting Nx 16, Nx does not support Storybook v6 any more. So, Nx will configure your project to use Storybook v7. If you are not on Storybook 7 yet, please migrate. You can read more about how to migrate to Storybook 7 in our [Storybook 7 migration generator](/packages/storybook/generators/migrate-7) guide.\n\nWhen running this generator, you will be prompted to provide the following:\n\n- The `name` of the project you want to generate the configuration for.\n- The `uiFramework` you want to use. Supported values are:\n  - `@storybook/angular`\n  - `@storybook/html-webpack5`\n  - `@storybook/nextjs`\n  - `@storybook/preact-webpack5`\n  - `@storybook/react-webpack5`\n  - `@storybook/react-vite`\n  - `@storybook/server-webpack5`\n  - `@storybook/svelte-webpack5`\n  - `@storybook/svelte-vite`\n  - `@storybook/sveltekit`\n  - `@storybook/vue-webpack5`\n  - `@storybook/vue-vite`\n  - `@storybook/vue3-webpack5`\n  - `@storybook/vue3-vite`\n  - `@storybook/web-components-webpack5`\n  - `@storybook/web-components-vite`\n- Whether you want to set up [Storybook interaction tests](https://storybook.js.org/docs/angular/writing-tests/interaction-testing) (`interactionTests`). If you choose `yes`, all the necessary dependencies will be installed. Also, a `test-storybook` target will be generated in your project's `project.json`, with a command to invoke the [Storybook `test-runner`](https://storybook.js.org/docs/angular/writing-tests/test-runner). You can read more about this in the [Nx Storybook interaction tests documentation page](/packages/storybook/documents/interaction-tests).\n\nYou must provide a `name` and a `uiFramework` for the generator to work.\n\nYou can read more about how this generator works, in the [Storybook package overview page](/packages/storybook#generating-storybook-configuration).\n\nIf you are using Angular, React, React Native or Next.js in your project, it's best to use the framework specific generator:\n\n- [React Storybook Configuration Generator](/packages/react/generators/storybook-configuration) (React and Next.js projects)\n\n- [Angular Storybook Configuration Generator](/packages/angular/generators/storybook-configuration)\n\n- [React Native Storybook Configuration Generator](/packages/react-native/generators/storybook-configuration)\n\n## Examples\n\n### Generate Storybook configuration using JavaScript\n\n```bash\nnx g @nx/storybook:configuration ui --uiFramework=@storybook/web-components-vite --tsConfiguration=false\n```\n\nBy default, our generator generates TypeScript Storybook configuration files. You can choose to use JavaScript for the Storybook configuration files of your project (the files inside the `.storybook` directory, eg. `.storybook/main.js`).\n",
+    "examplesFile": "---\ntitle: Storybook configuration generator examples\ndescription: This page contains examples for the @nx/storybook:configuration generator.\n---\n\nThis is a framework-agnostic generator for setting up Storybook configuration for a project.\n\n```bash\nnx g @nx/storybook:configuration\n```\n\nStarting Nx 16, Nx does not support Storybook v6 any more. So, Nx will configure your project to use Storybook v7. If you are not on Storybook 7 yet, please migrate. You can read more about how to migrate to Storybook 7 in our [Storybook 7 migration generator](/packages/storybook/generators/migrate-7) guide.\n\nWhen running this generator, you will be prompted to provide the following:\n\n- The `name` of the project you want to generate the configuration for.\n- The `uiFramework` you want to use. Supported values are:\n  - `@storybook/angular`\n  - `@storybook/html-webpack5`\n  - `@storybook/nextjs`\n  - `@storybook/preact-webpack5`\n  - `@storybook/react-webpack5`\n  - `@storybook/react-vite`\n  - `@storybook/server-webpack5`\n  - `@storybook/svelte-webpack5`\n  - `@storybook/svelte-vite`\n  - `@storybook/sveltekit`\n  - `@storybook/vue-webpack5`\n  - `@storybook/vue-vite`\n  - `@storybook/vue3-webpack5`\n  - `@storybook/vue3-vite`\n  - `@storybook/web-components-webpack5`\n  - `@storybook/web-components-vite`\n- Whether you want to set up [Storybook interaction tests](https://storybook.js.org/docs/angular/writing-tests/interaction-testing) (`interactionTests`). If you choose `yes`, all the necessary dependencies will be installed. Also, a `test-storybook` target will be generated in your project's `project.json`, with a command to invoke the [Storybook `test-runner`](https://storybook.js.org/docs/angular/writing-tests/test-runner). You can read more about this in the [Nx Storybook interaction tests documentation page](/packages/storybook/documents/interaction-tests).\n\nYou must provide a `name` and a `uiFramework` for the generator to work.\n\nYou can read more about how this generator works, in the [Storybook package overview page](/packages/storybook#generating-storybook-configuration).\n\nIf you are using Angular, React, React Native or Next.js in your project, it's best to use the framework specific generator:\n\n- [React Storybook Configuration Generator](/nx-api/react/generators/storybook-configuration) (React and Next.js projects)\n\n- [Angular Storybook Configuration Generator](/nx-api/angular/generators/storybook-configuration)\n\n- [React Native Storybook Configuration Generator](/nx-api/react-native/generators/storybook-configuration)\n\n## Examples\n\n### Generate Storybook configuration using JavaScript\n\n```bash\nnx g @nx/storybook:configuration ui --uiFramework=@storybook/web-components-vite --tsConfiguration=false\n```\n\nBy default, our generator generates TypeScript Storybook configuration files. You can choose to use JavaScript for the Storybook configuration files of your project (the files inside the `.storybook` directory, eg. `.storybook/main.js`).\n",
     "presets": []
   },
   "description": "Add Storybook configuration to a UI library or an application.",

docs/map.json

@@ -656,6 +656,13 @@
                   "description": "This guide explains how to set up Storybook for React projects in your Nx workspace.",
                   "file": "shared/recipes/storybook/plugin-react"
                 },
+                {
+                  "name": "Set up Storybook for Vue Projects",
+                  "id": "overview-vue",
+                  "tags": ["storybook"],
+                  "description": "This guide explains how to set up Storybook for Vue projects in your Nx workspace.",
+                  "file": "shared/recipes/storybook/plugin-vue"
+                },
                 {
                   "name": "Set up Storybook for Angular Projects",
                   "id": "overview-angular",