feat(vue): storybook configuration generator for vue

nrwl · Sep 14, 2023 · 5e2cd1a · 5e2cd1a
1 parent 799ae13
commit 5e2cd1a
Show file tree

Hide file tree

Showing 36 changed files with 2,034 additions and 113 deletions.
diff --git a/docs/generated/manifests/menus.json b/docs/generated/manifests/menus.json
@@ -1946,6 +1946,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",
@@ -3103,6 +3111,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",
@@ -3194,6 +3210,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",

diff --git a/docs/generated/manifests/nx.json b/docs/generated/manifests/nx.json
@@ -2426,6 +2426,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",
@@ -3869,6 +3879,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",
@@ -3984,6 +4004,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",

diff --git a/docs/generated/manifests/tags.json b/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",

diff --git a/docs/generated/packages/storybook/documents/overview.md b/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](/packages/angular/generators/storybook-configuration), [React](/packages/react/generators/storybook-configuration), [React Native](/packages/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`](/packages/angular/generators/storybook-configuration), [`@nx/react:storybook-configuration`](/packages/react/generators/storybook-configuration), [`@nx/react-native:storybook-configuration`](/packages/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](/packages/angular/generators/storybook-configuration), [React](/packages/react/generators/storybook-configuration), [React Native](/packages/react-native/generators/storybook-configuration), [Vue](/packages/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`](/packages/angular/generators/storybook-configuration), [`@nx/react:storybook-configuration`](/packages/react/generators/storybook-configuration), [`@nx/react-native:storybook-configuration`](/packages/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).
 

diff --git a/docs/map.json b/docs/map.json
@@ -742,6 +742,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",

diff --git a/docs/shared/packages/storybook/plugin-overview.md b/docs/shared/packages/storybook/plugin-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](/packages/angular/generators/storybook-configuration), [React](/packages/react/generators/storybook-configuration), [React Native](/packages/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`](/packages/angular/generators/storybook-configuration), [`@nx/react:storybook-configuration`](/packages/react/generators/storybook-configuration), [`@nx/react-native:storybook-configuration`](/packages/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](/packages/angular/generators/storybook-configuration), [React](/packages/react/generators/storybook-configuration), [React Native](/packages/react-native/generators/storybook-configuration), [Vue](/packages/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`](/packages/angular/generators/storybook-configuration), [`@nx/react:storybook-configuration`](/packages/react/generators/storybook-configuration), [`@nx/react-native:storybook-configuration`](/packages/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).