feat(nuxt): storybook generators

nrwl · Oct 12, 2023 · b0b7b67 · b0b7b67
1 parent f83cf01
commit b0b7b67
Show file tree

Hide file tree

Showing 22 changed files with 772 additions and 46 deletions.
diff --git a/docs/generated/manifests/menus.json b/docs/generated/manifests/menus.json
@@ -1711,6 +1711,14 @@
                 "children": [],
                 "disableCollapsible": false
               },
+              {
+                "name": "Set up Storybook for Angular Projects",
+                "path": "/recipes/storybook/overview-angular",
+                "id": "overview-angular",
+                "isExternal": false,
+                "children": [],
+                "disableCollapsible": false
+              },
               {
                 "name": "Set up Storybook for Vue Projects",
                 "path": "/recipes/storybook/overview-vue",
@@ -1720,9 +1728,9 @@
                 "disableCollapsible": false
               },
               {
-                "name": "Set up Storybook for Angular Projects",
-                "path": "/recipes/storybook/overview-angular",
-                "id": "overview-angular",
+                "name": "Set up Storybook for Nuxt Projects",
+                "path": "/recipes/storybook/overview-nuxt",
+                "id": "overview-nuxt",
                 "isExternal": false,
                 "children": [],
                 "disableCollapsible": false
@@ -2908,6 +2916,14 @@
             "children": [],
             "disableCollapsible": false
           },
+          {
+            "name": "Set up Storybook for Angular Projects",
+            "path": "/recipes/storybook/overview-angular",
+            "id": "overview-angular",
+            "isExternal": false,
+            "children": [],
+            "disableCollapsible": false
+          },
           {
             "name": "Set up Storybook for Vue Projects",
             "path": "/recipes/storybook/overview-vue",
@@ -2917,9 +2933,9 @@
             "disableCollapsible": false
           },
           {
-            "name": "Set up Storybook for Angular Projects",
-            "path": "/recipes/storybook/overview-angular",
-            "id": "overview-angular",
+            "name": "Set up Storybook for Nuxt Projects",
+            "path": "/recipes/storybook/overview-nuxt",
+            "id": "overview-nuxt",
             "isExternal": false,
             "children": [],
             "disableCollapsible": false
@@ -3007,6 +3023,14 @@
         "children": [],
         "disableCollapsible": false
       },
+      {
+        "name": "Set up Storybook for Angular Projects",
+        "path": "/recipes/storybook/overview-angular",
+        "id": "overview-angular",
+        "isExternal": false,
+        "children": [],
+        "disableCollapsible": false
+      },
       {
         "name": "Set up Storybook for Vue Projects",
         "path": "/recipes/storybook/overview-vue",
@@ -3016,9 +3040,9 @@
         "disableCollapsible": false
       },
       {
-        "name": "Set up Storybook for Angular Projects",
-        "path": "/recipes/storybook/overview-angular",
-        "id": "overview-angular",
+        "name": "Set up Storybook for Nuxt Projects",
+        "path": "/recipes/storybook/overview-nuxt",
+        "id": "overview-nuxt",
         "isExternal": false,
         "children": [],
         "disableCollapsible": false

diff --git a/docs/generated/manifests/nx.json b/docs/generated/manifests/nx.json
@@ -2133,6 +2133,16 @@
             "path": "/recipes/storybook/overview-react",
             "tags": ["storybook"]
           },
+          {
+            "id": "overview-angular",
+            "name": "Set up Storybook for Angular Projects",
+            "description": "This guide explains how to set up Storybook for Angular projects in your Nx workspace.",
+            "file": "shared/recipes/storybook/plugin-angular",
+            "itemList": [],
+            "isExternal": false,
+            "path": "/recipes/storybook/overview-angular",
+            "tags": ["storybook"]
+          },
           {
             "id": "overview-vue",
             "name": "Set up Storybook for Vue Projects",
@@ -2144,13 +2154,13 @@
             "tags": ["storybook"]
           },
           {
-            "id": "overview-angular",
-            "name": "Set up Storybook for Angular Projects",
-            "description": "This guide explains how to set up Storybook for Angular projects in your Nx workspace.",
-            "file": "shared/recipes/storybook/plugin-angular",
+            "id": "overview-nuxt",
+            "name": "Set up Storybook for Nuxt Projects",
+            "description": "This guide explains how to set up Storybook for Nuxt projects in your Nx workspace.",
+            "file": "shared/recipes/storybook/plugin-nuxt",
             "itemList": [],
             "isExternal": false,
-            "path": "/recipes/storybook/overview-angular",
+            "path": "/recipes/storybook/overview-nuxt",
             "tags": ["storybook"]
           },
           {
@@ -3626,6 +3636,16 @@
         "path": "/recipes/storybook/overview-react",
         "tags": ["storybook"]
       },
+      {
+        "id": "overview-angular",
+        "name": "Set up Storybook for Angular Projects",
+        "description": "This guide explains how to set up Storybook for Angular projects in your Nx workspace.",
+        "file": "shared/recipes/storybook/plugin-angular",
+        "itemList": [],
+        "isExternal": false,
+        "path": "/recipes/storybook/overview-angular",
+        "tags": ["storybook"]
+      },
       {
         "id": "overview-vue",
         "name": "Set up Storybook for Vue Projects",
@@ -3637,13 +3657,13 @@
         "tags": ["storybook"]
       },
       {
-        "id": "overview-angular",
-        "name": "Set up Storybook for Angular Projects",
-        "description": "This guide explains how to set up Storybook for Angular projects in your Nx workspace.",
-        "file": "shared/recipes/storybook/plugin-angular",
+        "id": "overview-nuxt",
+        "name": "Set up Storybook for Nuxt Projects",
+        "description": "This guide explains how to set up Storybook for Nuxt projects in your Nx workspace.",
+        "file": "shared/recipes/storybook/plugin-nuxt",
         "itemList": [],
         "isExternal": false,
-        "path": "/recipes/storybook/overview-angular",
+        "path": "/recipes/storybook/overview-nuxt",
         "tags": ["storybook"]
       },
       {
@@ -3751,6 +3771,16 @@
     "path": "/recipes/storybook/overview-react",
     "tags": ["storybook"]
   },
+  "/recipes/storybook/overview-angular": {
+    "id": "overview-angular",
+    "name": "Set up Storybook for Angular Projects",
+    "description": "This guide explains how to set up Storybook for Angular projects in your Nx workspace.",
+    "file": "shared/recipes/storybook/plugin-angular",
+    "itemList": [],
+    "isExternal": false,
+    "path": "/recipes/storybook/overview-angular",
+    "tags": ["storybook"]
+  },
   "/recipes/storybook/overview-vue": {
     "id": "overview-vue",
     "name": "Set up Storybook for Vue Projects",
@@ -3761,14 +3791,14 @@
     "path": "/recipes/storybook/overview-vue",
     "tags": ["storybook"]
   },
-  "/recipes/storybook/overview-angular": {
-    "id": "overview-angular",
-    "name": "Set up Storybook for Angular Projects",
-    "description": "This guide explains how to set up Storybook for Angular projects in your Nx workspace.",
-    "file": "shared/recipes/storybook/plugin-angular",
+  "/recipes/storybook/overview-nuxt": {
+    "id": "overview-nuxt",
+    "name": "Set up Storybook for Nuxt Projects",
+    "description": "This guide explains how to set up Storybook for Nuxt projects in your Nx workspace.",
+    "file": "shared/recipes/storybook/plugin-nuxt",
     "itemList": [],
     "isExternal": false,
-    "path": "/recipes/storybook/overview-angular",
+    "path": "/recipes/storybook/overview-nuxt",
     "tags": ["storybook"]
   },
   "/recipes/storybook/configuring-storybook": {

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 Angular projects in your Nx workspace.",
+      "file": "shared/recipes/storybook/plugin-angular",
+      "id": "overview-angular",
+      "name": "Set up Storybook for Angular Projects",
+      "path": "/recipes/storybook/overview-angular"
+    },
     {
       "description": "This guide explains how to set up Storybook for Vue projects in your Nx workspace.",
       "file": "shared/recipes/storybook/plugin-vue",
@@ -900,11 +907,11 @@
       "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",
-      "id": "overview-angular",
-      "name": "Set up Storybook for Angular Projects",
-      "path": "/recipes/storybook/overview-angular"
+      "description": "This guide explains how to set up Storybook for Nuxt projects in your Nx workspace.",
+      "file": "shared/recipes/storybook/plugin-nuxt",
+      "id": "overview-nuxt",
+      "name": "Set up Storybook for Nuxt Projects",
+      "path": "/recipes/storybook/overview-nuxt"
     },
     {
       "description": "This guide explains how Storybook is configured on your Nx workspace.",

diff --git a/docs/generated/packages/storybook/documents/overview.md b/docs/generated/packages/storybook/documents/overview.md
@@ -72,6 +72,13 @@ nx g @nx/react:storybook-configuration my-react-project
 nx g @nx/vue:storybook-configuration my-vue-project
 ```
 
+{% /tab %}
+{% tab label="Nuxt" %}
+
+```shell
+nx g @nx/nuxt:storybook-configuration my-nuxt-app
+```
+
 {% /tab %}
 {% tab label="React Native" %}
 
@@ -84,7 +91,7 @@ nx g @nx/react-native:storybook-configuration my-react-native-project
 
 These framework-specific generators will also **generate stories** and interaction tests for you.
 
-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:
+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), [Nuxt](/nx-api/nuxt/generators/storybook-configuration)), in the field `uiFramework` you must choose one of the following Storybook frameworks:
 
 - `@storybook/angular`
 - `@storybook/html-webpack5`
@@ -111,7 +118,7 @@ Choosing one of these frameworks will have the following effects on your workspa
 
 3. Nx will create new `targets` in your project's `project.json`, called `storybook`, `test-storybook` and `build-storybook`, containing all the necessary configuration to serve, test and build Storybook.
 
-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.
+Make sure to **use the framework-specific generators** if your project is using Angular, React, Next.js, Vue, Nuxt, or React Native: [`@nx/angular:storybook-configuration`](/nx-api/angular/generators/storybook-configuration), [`@nx/react:storybook-configuration`](/nx-api/react/generators/storybook-configuration), [`@nx/vue:storybook-configuration`](/nx-api/vue/generators/storybook-configuration), [`@nx/nuxt:storybook-configuration`](/nx-api/nuxt/generators/storybook-configuration), [`@nx/react-native:storybook-configuration`](/nx-api/react-native/generators/storybook-configuration), as shown above.
 
 ### Running Storybook
 
@@ -211,6 +218,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)
+- [Set up Storybook for Nuxt Projects](/recipes/storybook/overview-nuxt)
 
 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
@@ -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 Angular Projects",
+                  "id": "overview-angular",
+                  "tags": ["storybook"],
+                  "description": "This guide explains how to set up Storybook for Angular projects in your Nx workspace.",
+                  "file": "shared/recipes/storybook/plugin-angular"
+                },
                 {
                   "name": "Set up Storybook for Vue Projects",
                   "id": "overview-vue",
@@ -664,11 +671,11 @@
                   "file": "shared/recipes/storybook/plugin-vue"
                 },
                 {
-                  "name": "Set up Storybook for Angular Projects",
-                  "id": "overview-angular",
+                  "name": "Set up Storybook for Nuxt Projects",
+                  "id": "overview-nuxt",
                   "tags": ["storybook"],
-                  "description": "This guide explains how to set up Storybook for Angular projects in your Nx workspace.",
-                  "file": "shared/recipes/storybook/plugin-angular"
+                  "description": "This guide explains how to set up Storybook for Nuxt projects in your Nx workspace.",
+                  "file": "shared/recipes/storybook/plugin-nuxt"
                 },
                 {
                   "name": "Configuring Storybook on Nx",

diff --git a/docs/shared/packages/storybook/plugin-overview.md b/docs/shared/packages/storybook/plugin-overview.md
@@ -72,6 +72,13 @@ nx g @nx/react:storybook-configuration my-react-project
 nx g @nx/vue:storybook-configuration my-vue-project
 ```
 
+{% /tab %}
+{% tab label="Nuxt" %}
+
+```shell
+nx g @nx/nuxt:storybook-configuration my-nuxt-app
+```
+
 {% /tab %}
 {% tab label="React Native" %}
 
@@ -84,7 +91,7 @@ nx g @nx/react-native:storybook-configuration my-react-native-project
 
 These framework-specific generators will also **generate stories** and interaction tests for you.
 
-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:
+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), [Nuxt](/nx-api/nuxt/generators/storybook-configuration)), in the field `uiFramework` you must choose one of the following Storybook frameworks:
 
 - `@storybook/angular`
 - `@storybook/html-webpack5`
@@ -111,7 +118,7 @@ Choosing one of these frameworks will have the following effects on your workspa
 
 3. Nx will create new `targets` in your project's `project.json`, called `storybook`, `test-storybook` and `build-storybook`, containing all the necessary configuration to serve, test and build Storybook.
 
-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.
+Make sure to **use the framework-specific generators** if your project is using Angular, React, Next.js, Vue, Nuxt, or React Native: [`@nx/angular:storybook-configuration`](/nx-api/angular/generators/storybook-configuration), [`@nx/react:storybook-configuration`](/nx-api/react/generators/storybook-configuration), [`@nx/vue:storybook-configuration`](/nx-api/vue/generators/storybook-configuration), [`@nx/nuxt:storybook-configuration`](/nx-api/nuxt/generators/storybook-configuration), [`@nx/react-native:storybook-configuration`](/nx-api/react-native/generators/storybook-configuration), as shown above.
 
 ### Running Storybook
 
@@ -211,6 +218,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)
+- [Set up Storybook for Nuxt Projects](/recipes/storybook/overview-nuxt)
 
 You can find all Storybook-related Nx documentation in the [Storybook recipes section](/recipes/storybook).