diff --git a/docs/generated/manifests/menus.json b/docs/generated/manifests/menus.json index b8b1173cc7..87c9a30d0a 100644 --- a/docs/generated/manifests/menus.json +++ b/docs/generated/manifests/menus.json @@ -1719,22 +1719,6 @@ "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 Nuxt Projects", - "path": "/recipes/storybook/overview-nuxt", - "id": "overview-nuxt", - "isExternal": false, - "children": [], - "disableCollapsible": false - }, { "name": "Configuring Storybook on Nx", "path": "/recipes/storybook/configuring-storybook", @@ -2924,22 +2908,6 @@ "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 Nuxt Projects", - "path": "/recipes/storybook/overview-nuxt", - "id": "overview-nuxt", - "isExternal": false, - "children": [], - "disableCollapsible": false - }, { "name": "Configuring Storybook on Nx", "path": "/recipes/storybook/configuring-storybook", @@ -3031,22 +2999,6 @@ "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 Nuxt Projects", - "path": "/recipes/storybook/overview-nuxt", - "id": "overview-nuxt", - "isExternal": false, - "children": [], - "disableCollapsible": false - }, { "name": "Configuring Storybook on Nx", "path": "/recipes/storybook/configuring-storybook", diff --git a/docs/generated/manifests/nx.json b/docs/generated/manifests/nx.json index 651597621f..d238125e70 100644 --- a/docs/generated/manifests/nx.json +++ b/docs/generated/manifests/nx.json @@ -2143,26 +2143,6 @@ "path": "/recipes/storybook/overview-angular", "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-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-nuxt", - "tags": ["storybook"] - }, { "id": "configuring-storybook", "name": "Configuring Storybook on Nx", @@ -3646,26 +3626,6 @@ "path": "/recipes/storybook/overview-angular", "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-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-nuxt", - "tags": ["storybook"] - }, { "id": "configuring-storybook", "name": "Configuring Storybook on Nx", @@ -3781,26 +3741,6 @@ "path": "/recipes/storybook/overview-angular", "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-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-nuxt", - "tags": ["storybook"] - }, "/recipes/storybook/configuring-storybook": { "id": "configuring-storybook", "name": "Configuring Storybook on Nx", diff --git a/docs/generated/manifests/tags.json b/docs/generated/manifests/tags.json index fea6d33720..e57578dac1 100644 --- a/docs/generated/manifests/tags.json +++ b/docs/generated/manifests/tags.json @@ -899,20 +899,6 @@ "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", - "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 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.", "file": "shared/recipes/storybook/configuring-storybook", diff --git a/docs/generated/packages/storybook/documents/best-practices.md b/docs/generated/packages/storybook/documents/best-practices.md index e3e06bd383..0d8ee2b8b9 100644 --- a/docs/generated/packages/storybook/documents/best-practices.md +++ b/docs/generated/packages/storybook/documents/best-practices.md @@ -42,8 +42,6 @@ If your project is not configured yet, check out one of these guides: - [Set up Storybook for React Projects](/recipes/storybook/overview-react) - [Set up Storybook for Angular Projects](/recipes/storybook/overview-angular) -- -- [Set up Storybook for Vue Projects](/recipes/storybook/overview-vue) If your project is [already configured](/nx-api/storybook), you can use the `stories` generator: @@ -51,8 +49,6 @@ If your project is [already configured](/nx-api/storybook), you can use the `sto - [React Native stories generator](/nx-api/react-native/generators/stories) -- [Vue stories generator](/nx-api/vue/generators/stories) - - [Angular stories generator](/nx-api/angular/generators/stories) The stories generator will read your inputs (if you’re using Angular), or your props (if you're using React), and will generate stories with the corresponding arguments/controls already prefilled. diff --git a/docs/generated/packages/storybook/documents/overview.md b/docs/generated/packages/storybook/documents/overview.md index 6b241e8c1b..66c9c3c0d8 100644 --- a/docs/generated/packages/storybook/documents/overview.md +++ b/docs/generated/packages/storybook/documents/overview.md @@ -91,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), [Nuxt](/nx-api/nuxt/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)), in the field `uiFramework` you must choose one of the following Storybook frameworks: - `@storybook/angular` - `@storybook/html-webpack5` @@ -118,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, 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. +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/react-native:storybook-configuration`](/nx-api/react-native/generators/storybook-configuration), as shown above. ### Running Storybook @@ -217,8 +217,6 @@ 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/generated/packages/storybook/generators/configuration.json b/docs/generated/packages/storybook/generators/configuration.json index 553c517331..af445bc84e 100644 --- a/docs/generated/packages/storybook/generators/configuration.json +++ b/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\n{% callout type=\"info\" title=\"Nx uses Storybook 7\" %}\nNx 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. Please follow our [Storybook 7 migration generator](/packages/storybook/generators/migrate-7) guide.\n{% /callout %}\n\nIf you are using Angular, React, Next.js, Vue or React Native in your project, it's best to use the framework specific Storybook configuration 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- [Vue Storybook Configuration Generator](/nx-api/vue/generators/storybook-configuration)\n\n\n\n- [React Native Storybook Configuration Generator](/nx-api/react-native/generators/storybook-configuration)\n\nIf you are not using one of the framework-specific generators mentioned above, when 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\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\n{% callout type=\"info\" title=\"Nx uses Storybook 7\" %}\nNx 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. Please follow our [Storybook 7 migration generator](/packages/storybook/generators/migrate-7) guide.\n{% /callout %}\n\nIf you are using Angular, React, Next.js, Vue or React Native in your project, it's best to use the framework specific Storybook configuration 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\nIf you are not using one of the framework-specific generators mentioned above, when 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\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.", diff --git a/docs/map.json b/docs/map.json index 89cd9c9b58..be544d272c 100644 --- a/docs/map.json +++ b/docs/map.json @@ -663,20 +663,6 @@ "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", - "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 Nuxt Projects", - "id": "overview-nuxt", - "tags": ["storybook"], - "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", "id": "configuring-storybook", diff --git a/docs/shared/packages/storybook/best-practices.md b/docs/shared/packages/storybook/best-practices.md index e3e06bd383..0d8ee2b8b9 100644 --- a/docs/shared/packages/storybook/best-practices.md +++ b/docs/shared/packages/storybook/best-practices.md @@ -42,8 +42,6 @@ If your project is not configured yet, check out one of these guides: - [Set up Storybook for React Projects](/recipes/storybook/overview-react) - [Set up Storybook for Angular Projects](/recipes/storybook/overview-angular) -- -- [Set up Storybook for Vue Projects](/recipes/storybook/overview-vue) If your project is [already configured](/nx-api/storybook), you can use the `stories` generator: @@ -51,8 +49,6 @@ If your project is [already configured](/nx-api/storybook), you can use the `sto - [React Native stories generator](/nx-api/react-native/generators/stories) -- [Vue stories generator](/nx-api/vue/generators/stories) - - [Angular stories generator](/nx-api/angular/generators/stories) The stories generator will read your inputs (if you’re using Angular), or your props (if you're using React), and will generate stories with the corresponding arguments/controls already prefilled. diff --git a/docs/shared/packages/storybook/plugin-overview.md b/docs/shared/packages/storybook/plugin-overview.md index 6b241e8c1b..66c9c3c0d8 100644 --- a/docs/shared/packages/storybook/plugin-overview.md +++ b/docs/shared/packages/storybook/plugin-overview.md @@ -91,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), [Nuxt](/nx-api/nuxt/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)), in the field `uiFramework` you must choose one of the following Storybook frameworks: - `@storybook/angular` - `@storybook/html-webpack5` @@ -118,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, 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. +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/react-native:storybook-configuration`](/nx-api/react-native/generators/storybook-configuration), as shown above. ### Running Storybook @@ -217,8 +217,6 @@ 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/shared/recipes/storybook/plugin-nuxt.md b/docs/shared/recipes/storybook/plugin-nuxt.md deleted file mode 100644 index 844fef6966..0000000000 --- a/docs/shared/recipes/storybook/plugin-nuxt.md +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: Set up Storybook for Nuxt Projects -description: This guide explains how to set up Storybook for Nuxt projects in your Nx workspace. ---- - -# Set up Storybook for Nuxt Projects - -This guide will walk you through setting up [Storybook](https://storybook.js.org) for Nuxt projects in your Nx workspace. - -The generators for your Nuxt projects use the `@nx/vue:storybook-configuration` and `@nx/vue:stories` generators under the hood, with some additional configuration. There is no official support or settings for Nuxt3 in Storybook yet, so until then we are just configuring your Nuxt apps as if they were Vue apps, since the components are still Vue components. - -{% 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](/nx-api/storybook) to get started. -{% /callout %} - -## Generate Storybook Configuration for a Nuxt project - -You can generate Storybook configuration for an individual Nuxt project by using the [`@nx/nuxt:storybook-configuration` generator](/nx-api/nuxt/generators/storybook-configuration), like this: - -```shell -nx g @nx/nuxt:storybook-configuration project-name -``` - -## Auto-generate Stories - -The [`@nx/nuxt:storybook-configuration` generator](/nx-api/nuxt/generators/storybook-configuration) has the option to automatically generate `*.stories.ts` files for each component declared in your project, under the `components` directory. This makes sure that no stories are generated for your `pages` components. The stories will be generated using [Component Story Format 3 (CSF3)](https://storybook.js.org/blog/storybook-csf3-is-here/). - -```text -/ -├── 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/nuxt:stories` generator](/nx-api/nuxt/generators/stories): - -```shell -nx g @nx/nuxt:stories --project= -``` - -{% callout type="note" title="Example" %} -Let's take for a example a Nuxt application in your workspace, under `my-nuxt-app`, called `my-nuxt-app`. This application contains a component, called `my-button`. - -The command to generate stories for that application would be: - -```shell -nx g @nx/nuxt:stories --project=my-nuxt-app -``` - -and the result would be the following: - -```text -/ -my-nuxt-app -├── nuxt.config.ts -├── project.json -├── src -│   ├── app.vue -│   ├── assets -│   ├── components -│   │   └── my-button -│   │   ├── my-button.stories.ts -│   │   └── my-button.vue -│   ├── pages -│   ├── public -│   └── server -├── tsconfig.json -└── tsconfig.storybook.json -``` - -{% /callout %} - -## More Documentation - -You can find all Storybook-related Nx topics [here](/nx-api#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/recipes/storybook/plugin-vue.md b/docs/shared/recipes/storybook/plugin-vue.md deleted file mode 100644 index ba8d7521a1..0000000000 --- a/docs/shared/recipes/storybook/plugin-vue.md +++ /dev/null @@ -1,80 +0,0 @@ ---- -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](/nx-api/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](/nx-api/vue/generators/storybook-configuration), like this: - -```shell -nx g @nx/vue:storybook-configuration project-name -``` - -## Auto-generate Stories - -The [`@nx/vue:storybook-configuration` generator](/nx-api/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 -/ -├── 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](/nx-api/vue/generators/stories): - -```shell -nx g @nx/vue:stories --project= -``` - -{% 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 -/ -├── 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](/nx-api#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 index 178cb8df65..a3eee7facd 100644 --- a/docs/shared/reference/sitemap.md +++ b/docs/shared/reference/sitemap.md @@ -113,8 +113,6 @@ - [Storybook](/recipes/storybook) - [Set up Storybook for React Projects](/recipes/storybook/overview-react) - [Set up Storybook for Angular Projects](/recipes/storybook/overview-angular) - - [Set up Storybook for Vue Projects](/recipes/storybook/overview-vue) - - [Set up Storybook for Nuxt Projects](/recipes/storybook/overview-nuxt) - [Configuring Storybook on Nx](/recipes/storybook/configuring-storybook) - [One main Storybook instance for all projects](/recipes/storybook/one-storybook-for-all) - [One Storybook instance per scope](/recipes/storybook/one-storybook-per-scope) diff --git a/packages/storybook/docs/configuration-generator-examples.md b/packages/storybook/docs/configuration-generator-examples.md index 275c98f17f..1f90da26c0 100644 --- a/packages/storybook/docs/configuration-generator-examples.md +++ b/packages/storybook/docs/configuration-generator-examples.md @@ -19,10 +19,6 @@ If you are using Angular, React, Next.js, Vue or React Native in your project, i - [Angular Storybook Configuration Generator](/nx-api/angular/generators/storybook-configuration) -- [Vue Storybook Configuration Generator](/nx-api/vue/generators/storybook-configuration) - - - - [React Native Storybook Configuration Generator](/nx-api/react-native/generators/storybook-configuration) If you are not using one of the framework-specific generators mentioned above, when running this generator you will be prompted to provide the following: