docs(storybook): remove entirely vue and nuxt pages (#19593)
This commit is contained in:
Katerina Skroumpelou
GitHub
parent
57247e0b81
commit
5ec8b653a0
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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).
|
||||
|
||||
|
||||
@ -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<!-- TODO(katerina): uncomment when Nuxt is in - [Nuxt Storybook Configuration Generator](/nx-api/nuxt/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",
|
||||
"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.",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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).
|
||||
|
||||
|
||||
@ -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
|
||||
<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/nuxt:stories` generator](/nx-api/nuxt/generators/stories):
|
||||
|
||||
```shell
|
||||
nx g @nx/nuxt:stories --project=<project-name>
|
||||
```
|
||||
|
||||
{% 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
|
||||
<workspace name>/
|
||||
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).
|
||||
@ -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
|
||||
<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](/nx-api/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](/nx-api#storybook).
|
||||
|
||||
For more on using Storybook, see the [official Storybook documentation](https://storybook.js.org/docs/vue/get-started/introduction).
|
||||
@ -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)
|
||||
|
||||
@ -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)
|
||||
|
||||
<!-- TODO(katerina): uncomment when Nuxt is in - [Nuxt Storybook Configuration Generator](/nx-api/nuxt/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:
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user