feat(vue): storybook configuration generator for vue

nrwl · Sep 13, 2023 · 59d5b69 · 59d5b69
1 parent 8b812cc
commit 59d5b69
Show file tree

Hide file tree

Showing 34 changed files with 1,986 additions and 62 deletions.
diff --git a/docs/generated/manifests/menus.json b/docs/generated/manifests/menus.json
@@ -1922,6 +1922,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",
@@ -3079,6 +3087,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",
@@ -3170,6 +3186,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
@@ -2396,6 +2396,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",
@@ -3839,6 +3849,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",
@@ -3954,6 +3974,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,7 +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:
+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`
@@ -98,6 +98,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,16 +117,6 @@ 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
-
-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:
-
-```shell
-nx g @nx/storybook:configuration project-name --tsConfiguration=true
-```
-
-[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.
-
 ### Running Storybook
 
 Serve Storybook using this command:
@@ -157,20 +154,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 +177,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 +196,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
@@ -737,6 +737,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,7 +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:
+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`
@@ -98,6 +98,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,16 +117,6 @@ 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
-
-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:
-
-```shell
-nx g @nx/storybook:configuration project-name --tsConfiguration=true
-```
-
-[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.
-
 ### Running Storybook
 
 Serve Storybook using this command:
@@ -157,20 +154,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 +177,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 +196,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/shared/recipes/storybook/plugin-vue.md b/docs/shared/recipes/storybook/plugin-vue.md
@@ -0,0 +1,80 @@
+---
+title: Set up Storybook for Vue Projects
+description: This guide explains how to set up Storybook for Vue projects in your Nx workspace.
+---
+
+# Set up Storybook for Vue Projects
+
+This guide will walk you through setting up [Storybook](https://storybook.js.org) for Vue projects in your Nx workspace.
+
+{% callout type="warning" title="Set up Storybook in your workspace" %}
+You first need to set up Storybook for your Nx workspace, if you haven't already. You can read the [Storybook plugin overview guide](/packages/storybook) to get started.
+{% /callout %}
+
+## Generate Storybook Configuration for a Vue project
+
+You can generate Storybook configuration for an individual Vue project by using the [`@nx/vue:storybook-configuration` generator](/packages/vue/generators/storybook-configuration), like this:
+
+```shell
+nx g @nx/vue:storybook-configuration project-name
+```
+
+## Auto-generate Stories
+
+The [`@nx/vue:storybook-configuration` generator](/packages/vue/generators/storybook-configuration) has the option to automatically generate `*.stories.ts` files for each component declared in the library. The stories will be generated using [Component Story Format 3 (CSF3)](https://storybook.js.org/blog/storybook-csf3-is-here/).
+
+```text
+<some-folder>/
+├── MyComponent.vue
+└── MyComponent.stories.ts
+```
+
+If you add more components to your project, and want to generate stories for all your (new) components at any point, you can use the [`@nx/vue:stories` generator](/packages/vue/generators/stories):
+
+```shell
+nx g @nx/vue:stories --project=<project-name>
+```
+
+{% callout type="note" title="Example" %}
+Let's take for a example a library in your workspace, under `libs/feature/ui`, called `feature-ui`. This library contains a component, called `my-button`.
+
+The command to generate stories for that library would be:
+
+```shell
+nx g @nx/vue:stories --project=feature-ui
+```
+
+and the result would be the following:
+
+```text
+<workspace name>/
+├── apps/
+├── libs/
+│   ├── feature/
+│   │   ├── ui/
+|   |   |   ├── .storybook/
+|   |   |   ├── src/
+|   |   |   |   ├──lib
+|   |   |   |   |   ├──my-button
+|   |   |   |   |   |   ├── MyButton.vue
+|   |   |   |   |   |   ├── MyButton.stories.ts
+|   |   |   |   |   |   └── etc...
+|   |   |   |   |   └── etc...
+|   |   |   ├── README.md
+|   |   |   ├── tsconfig.json
+|   |   |   └── etc...
+|   |   └── etc...
+|   └── etc...
+├── nx.json
+├── package.json
+├── README.md
+└── etc...
+```
+
+{% /callout %}
+
+## More Documentation
+
+You can find all Storybook-related Nx topics [here](/packages#storybook).
+
+For more on using Storybook, see the [official Storybook documentation](https://storybook.js.org/docs/vue/get-started/introduction).
diff --git a/docs/shared/reference/sitemap.md b/docs/shared/reference/sitemap.md
@@ -127,6 +127,7 @@
       - [Wait for Tasks to Finish](/recipes/node/wait-for-tasks)
     - [Storybook](/recipes/storybook)
       - [Set up Storybook for React Projects](/recipes/storybook/overview-react)
+      - [Set up Storybook for Vue Projects](/recipes/storybook/overview-vue)
       - [Set up Storybook for Angular Projects](/recipes/storybook/overview-angular)
       - [Configuring Storybook on Nx](/recipes/storybook/configuring-storybook)
       - [One main Storybook instance for all projects](/recipes/storybook/one-storybook-for-all)