miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

docs(vue): all of vue docs (#19600)

Browse Source
This commit is contained in:
Katerina Skroumpelou 2023-10-20 19:28:47 +03:00 committed by GitHub
parent ac1f2d446b
commit 406018ca2d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
28 changed files with 1183 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
docs/generated/manifests/menus.json
View File

@ -1794,6 +1794,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": "Configuring Storybook on Nx",
"path": "/recipes/storybook/configuring-storybook",
@ -3097,6 +3105,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": "Configuring Storybook on Nx",
"path": "/recipes/storybook/configuring-storybook",
@ -3188,6 +3204,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": "Configuring Storybook on Nx",
"path": "/recipes/storybook/configuring-storybook",
@ -8705,6 +8729,97 @@
"isExternal": false,
"disableCollapsible": false
},
{
"id": "vue",
"path": "/nx-api/vue",
"name": "vue",
"children": [
{
"id": "documents",
"path": "/nx-api/vue/documents",
"name": "documents",
"children": [
{
"name": "Overview of the Nx Vue Plugin",
"path": "/nx-api/vue/documents/overview",
"id": "overview",
"isExternal": false,
"children": [],
"disableCollapsible": false
}
],
"isExternal": false,
"disableCollapsible": false
},
{
"id": "generators",
"path": "/nx-api/vue/generators",
"name": "generators",
"children": [
{
"id": "init",
"path": "/nx-api/vue/generators/init",
"name": "init",
"children": [],
"isExternal": false,
"disableCollapsible": false
},
{
"id": "application",
"path": "/nx-api/vue/generators/application",
"name": "application",
"children": [],
"isExternal": false,
"disableCollapsible": false
},
{
"id": "library",
"path": "/nx-api/vue/generators/library",
"name": "library",
"children": [],
"isExternal": false,
"disableCollapsible": false
},
{
"id": "component",
"path": "/nx-api/vue/generators/component",
"name": "component",
"children": [],
"isExternal": false,
"disableCollapsible": false
},
{
"id": "setup-tailwind",
"path": "/nx-api/vue/generators/setup-tailwind",
"name": "setup-tailwind",
"children": [],
"isExternal": false,
"disableCollapsible": false
},
{
"id": "storybook-configuration",
"path": "/nx-api/vue/generators/storybook-configuration",
"name": "storybook-configuration",
"children": [],
"isExternal": false,
"disableCollapsible": false
},
{
"id": "stories",
"path": "/nx-api/vue/generators/stories",
"name": "stories",
"children": [],
"isExternal": false,
"disableCollapsible": false
}
],
"isExternal": false,
"disableCollapsible": false
}
],
"isExternal": false,
"disableCollapsible": false
},
{
"id": "web",
"path": "/nx-api/web",

88
docs/generated/manifests/nx-api.json
View File

@ -2597,6 +2597,94 @@
},
"path": "/nx-api/vite"
},
"vue": {
"githubRoot": "https://github.com/nrwl/nx/blob/master",
"name": "vue",
"packageName": "@nx/vue",
"description": "The Vue plugin for Nx contains executors and generators for managing Vue applications and libraries within an Nx workspace. It provides:\n\n\n- Integration with libraries such as Jest, Cypress, and Storybook.\n\n- Generators for applications, libraries, and more.\n\n- Library build support for publishing packages to npm or other registries.\n\n- Utilities for automatic workspace refactoring.",
"documents": {
"/nx-api/vue/documents/overview": {
"id": "overview",
"name": "Overview of the Nx Vue Plugin",
"description": "The Nx Plugin for Vue contains generators for managing Vue applications and libraries within an Nx workspace. This page also explains how to configure Vue on your Nx workspace.",
"file": "generated/packages/vue/documents/overview",
"itemList": [],
"isExternal": false,
"path": "/nx-api/vue/documents/overview",
"tags": [],
"originalFilePath": "shared/packages/vue/vue-plugin"
}
},
"root": "/packages/vue",
"source": "/packages/vue/src",
"executors": {},
"generators": {
"/nx-api/vue/generators/init": {
"description": "Initialize the `@nx/vue` plugin.",
"file": "generated/packages/vue/generators/init.json",
"hidden": true,
"name": "init",
"originalFilePath": "/packages/vue/src/generators/init/schema.json",
"path": "/nx-api/vue/generators/init",
"type": "generator"
},
"/nx-api/vue/generators/application": {
"description": "Create a Vue application.",
"file": "generated/packages/vue/generators/application.json",
"hidden": false,
"name": "application",
"originalFilePath": "/packages/vue/src/generators/application/schema.json",
"path": "/nx-api/vue/generators/application",
"type": "generator"
},
"/nx-api/vue/generators/library": {
"description": "Create a Vue library.",
"file": "generated/packages/vue/generators/library.json",
"hidden": false,
"name": "library",
"originalFilePath": "/packages/vue/src/generators/library/schema.json",
"path": "/nx-api/vue/generators/library",
"type": "generator"
},
"/nx-api/vue/generators/component": {
"description": "Create a Vue component.",
"file": "generated/packages/vue/generators/component.json",
"hidden": false,
"name": "component",
"originalFilePath": "/packages/vue/src/generators/component/schema.json",
"path": "/nx-api/vue/generators/component",
"type": "generator"
},
"/nx-api/vue/generators/setup-tailwind": {
"description": "Set up Tailwind configuration for a project.",
"file": "generated/packages/vue/generators/setup-tailwind.json",
"hidden": false,
"name": "setup-tailwind",
"originalFilePath": "/packages/vue/src/generators/setup-tailwind/schema.json",
"path": "/nx-api/vue/generators/setup-tailwind",
"type": "generator"
},
"/nx-api/vue/generators/storybook-configuration": {
"description": "Set up storybook for a Vue app or library.",
"file": "generated/packages/vue/generators/storybook-configuration.json",
"hidden": false,
"name": "storybook-configuration",
"originalFilePath": "/packages/vue/src/generators/storybook-configuration/schema.json",
"path": "/nx-api/vue/generators/storybook-configuration",
"type": "generator"
},
"/nx-api/vue/generators/stories": {
"description": "Create stories for all components declared in an app or library.",
"file": "generated/packages/vue/generators/stories.json",
"hidden": false,
"name": "stories",
"originalFilePath": "/packages/vue/src/generators/stories/schema.json",
"path": "/nx-api/vue/generators/stories",
"type": "generator"
}
},
"path": "/nx-api/vue"
},
"web": {
"githubRoot": "https://github.com/nrwl/nx/blob/master",
"name": "web",

30
docs/generated/manifests/nx.json
View File

@ -2236,6 +2236,16 @@
"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": "configuring-storybook",
"name": "Configuring Storybook on Nx",
@ -3861,6 +3871,16 @@
"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": "configuring-storybook",
"name": "Configuring Storybook on Nx",
@ -3976,6 +3996,16 @@
"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/configuring-storybook": {
"id": "configuring-storybook",
"name": "Configuring Storybook on Nx",

7
docs/generated/manifests/tags.json
View File

@ -964,6 +964,13 @@
"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 Storybook is configured on your Nx workspace.",
"file": "shared/recipes/storybook/configuring-storybook",

87
docs/generated/packages-metadata.json
View File

@ -2572,6 +2572,93 @@
"root": "/packages/vite",
"source": "/packages/vite/src"
},
{
"description": "The Vue plugin for Nx contains executors and generators for managing Vue applications and libraries within an Nx workspace. It provides:\n\n\n- Integration with libraries such as Jest, Cypress, and Storybook.\n\n- Generators for applications, libraries, and more.\n\n- Library build support for publishing packages to npm or other registries.\n\n- Utilities for automatic workspace refactoring.",
"documents": [
{
"id": "overview",
"name": "Overview of the Nx Vue Plugin",
"description": "The Nx Plugin for Vue contains generators for managing Vue applications and libraries within an Nx workspace. This page also explains how to configure Vue on your Nx workspace.",
"file": "generated/packages/vue/documents/overview",
"itemList": [],
"isExternal": false,
"path": "vue/documents/overview",
"tags": [],
"originalFilePath": "shared/packages/vue/vue-plugin"
}
],
"executors": [],
"generators": [
{
"description": "Initialize the `@nx/vue` plugin.",
"file": "generated/packages/vue/generators/init.json",
"hidden": true,
"name": "init",
"originalFilePath": "/packages/vue/src/generators/init/schema.json",
"path": "vue/generators/init",
"type": "generator"
},
{
"description": "Create a Vue application.",
"file": "generated/packages/vue/generators/application.json",
"hidden": false,
"name": "application",
"originalFilePath": "/packages/vue/src/generators/application/schema.json",
"path": "vue/generators/application",
"type": "generator"
},
{
"description": "Create a Vue library.",
"file": "generated/packages/vue/generators/library.json",
"hidden": false,
"name": "library",
"originalFilePath": "/packages/vue/src/generators/library/schema.json",
"path": "vue/generators/library",
"type": "generator"
},
{
"description": "Create a Vue component.",
"file": "generated/packages/vue/generators/component.json",
"hidden": false,
"name": "component",
"originalFilePath": "/packages/vue/src/generators/component/schema.json",
"path": "vue/generators/component",
"type": "generator"
},
{
"description": "Set up Tailwind configuration for a project.",
"file": "generated/packages/vue/generators/setup-tailwind.json",
"hidden": false,
"name": "setup-tailwind",
"originalFilePath": "/packages/vue/src/generators/setup-tailwind/schema.json",
"path": "vue/generators/setup-tailwind",
"type": "generator"
},
{
"description": "Set up storybook for a Vue app or library.",
"file": "generated/packages/vue/generators/storybook-configuration.json",
"hidden": false,
"name": "storybook-configuration",
"originalFilePath": "/packages/vue/src/generators/storybook-configuration/schema.json",
"path": "vue/generators/storybook-configuration",
"type": "generator"
},
{
"description": "Create stories for all components declared in an app or library.",
"file": "generated/packages/vue/generators/stories.json",
"hidden": false,
"name": "stories",
"originalFilePath": "/packages/vue/src/generators/stories/schema.json",
"path": "vue/generators/stories",
"type": "generator"
}
],
"githubRoot": "https://github.com/nrwl/nx/blob/master",
"name": "vue",
"packageName": "@nx/vue",
"root": "/packages/vue",
"source": "/packages/vue/src"
},
{
"description": "The Nx Plugin for Web Components contains generators for managing Web Component applications and libraries within an Nx workspace. It provides:\n\n\n- Integration with libraries such as Jest, Cypress, and Storybook.\n\n- Scaffolding for creating buildable libraries that can be published to npm.\n\n- Utilities for automatic workspace refactoring.",
"documents": [

10
docs/generated/packages/storybook/documents/best-practices.md
View File

@ -39,18 +39,22 @@ If you are on a project using Angular, React or React Native, you can also gener
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 React (and Next.js) 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:
- [React (and Next.js) stories generator](/nx-api/react/generators/stories)
- [React Native stories generator](/nx-api/react-native/generators/stories)
- [Angular stories generator](/nx-api/angular/generators/stories)
- [Vue stories generator](/nx-api/vue/generators/stories)
- [React Native stories generator](/nx-api/react-native/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.
#### Storybook interaction tests

12
docs/generated/packages/storybook/documents/overview.md
View File

@ -72,13 +72,6 @@ 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" %}
@ -91,7 +84,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)), 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)), in the field `uiFramework` you must choose one of the following Storybook frameworks:
- `@storybook/angular`
- `@storybook/html-webpack5`
@ -118,7 +111,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/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), [`@nx/vue:storybook-configuration`](/nx-api/vue/generators/storybook-configuration) as shown above.
### Running Storybook
@ -217,6 +210,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).

2
docs/generated/packages/storybook/generators/configuration.json
View File

@ -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- [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\n- [Vue Storybook Configuration Generator](/nx-api/vue/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.",

60
docs/generated/packages/vue/documents/overview.md Normal file
View File

@ -0,0 +1,60 @@
---
title: Overview of the Nx Vue Plugin
description: The Nx Plugin for Vue contains generators for managing Vue applications and libraries within an Nx workspace. This page also explains how to configure Vue on your Nx workspace.
---
The Nx plugin for [Vue](https://vuejs.org/).
## Setting up a new Nx workspace with Vue
You can create a new workspace that uses Vue with one of the following commands:
- Generate a new monorepo with a Vue app set up with Vue
```shell
npx create-nx-workspace@latest --preset=vue
```
## Add Vue to an existing workspace
There are a number of ways to use Vue in your existing workspace.
### Install the `@nx/vue` plugin
{% tabs %}
{% tab label="npm" %}
```shell
npm install -D @nx/vue
```
{% /tab %}
{% tab label="yarn" %}
```shell
yarn add -D @nx/vue
```
{% /tab %}
{% tab label="pnpm" %}
```shell
pnpm install -D @nx/vue
```
{% /tab %}
{% /tabs %}
### Generate a new project using Vue
To generate a Vue application, run the following:
```shell
nx g @nx/vue:app my-app
```
To generate a Vue library, run the following:
```shell
nx g @nx/vue:lib my-lib
```

142
docs/generated/packages/vue/generators/application.json Normal file
View File

@ -0,0 +1,142 @@
{
"name": "application",
"factory": "./src/generators/application/application",
"schema": {
"$schema": "http://json-schema.org/schema",
"cli": "nx",
"$id": "NxVueApp",
"title": "Create a Vue Application",
"description": "Create a Vue application for Nx.",
"examples": [
{
"command": "nx g app myapp --directory=myorg/myapp",
"description": "Generate `apps/myorg/myapp` and `apps/myorg/myapp-e2e`"
},
{
"command": "nx g app myapp --routing",
"description": "Set up Vue Router"
}
],
"type": "object",
"properties": {
"name": {
"description": "The name of the application.",
"type": "string",
"$default": { "$source": "argv", "index": 0 },
"x-prompt": "What name would you like to use for the application?",
"pattern": "^[a-zA-Z][^:]*$"
},
"directory": {
"description": "The directory of the new application.",
"type": "string",
"alias": "dir",
"x-priority": "important"
},
"projectNameAndRootFormat": {
"description": "Whether to generate the project name and root directory as provided (`as-provided`) or generate them composing their values and taking the configured layout into account (`derived`).",
"type": "string",
"enum": ["as-provided", "derived"]
},
"style": {
"description": "The file extension to be used for style files.",
"type": "string",
"default": "css",
"alias": "s",
"x-prompt": {
"message": "Which stylesheet format would you like to use?",
"type": "list",
"items": [
{ "value": "css", "label": "CSS" },
{
"value": "scss",
"label": "SASS(.scss) [ http://sass-lang.com ]"
},
{
"value": "less",
"label": "LESS [ http://lesscss.org ]"
},
{ "value": "none", "label": "None" }
]
}
},
"linter": {
"description": "The tool to use for running lint checks.",
"type": "string",
"enum": ["eslint", "none"],
"default": "eslint"
},
"routing": {
"type": "boolean",
"description": "Generate application with routes.",
"x-prompt": "Would you like to add Vue Router to this application?",
"default": false
},
"skipFormat": {
"description": "Skip formatting files.",
"type": "boolean",
"default": false,
"x-priority": "internal"
},
"unitTestRunner": {
"type": "string",
"enum": ["jest", "vitest", "none"],
"description": "Test runner to use for unit tests.",
"x-prompt": "Which unit test runner would you like to use?",
"default": "vitest"
},
"inSourceTests": {
"type": "boolean",
"default": false,
"description": "When using Vitest, separate spec files will not be generated and instead will be included within the source files. Read more on the Vitest docs site: https://vitest.dev/guide/in-source.html"
},
"e2eTestRunner": {
"type": "string",
"enum": ["cypress", "playwright", "none"],
"description": "Test runner to use for end to end (E2E) tests.",
"x-prompt": "Which E2E test runner would you like to use?",
"default": "cypress"
},
"tags": {
"type": "string",
"description": "Add tags to the application (used for linting).",
"alias": "t"
},
"js": {
"type": "boolean",
"description": "Generate JavaScript files rather than TypeScript files.",
"default": false
},
"strict": {
"type": "boolean",
"description": "Whether to enable tsconfig strict mode or not.",
"default": true
},
"setParserOptionsProject": {
"type": "boolean",
"description": "Whether or not to configure the ESLint `parserOptions.project` option. We do not do this by default for lint performance reasons.",
"default": false
},
"skipPackageJson": {
"description": "Do not add dependencies to `package.json`.",
"type": "boolean",
"default": false,
"x-priority": "internal"
},
"rootProject": {
"description": "Create a application at the root of the workspace",
"type": "boolean",
"default": false,
"hidden": true
}
},
"required": ["name"],
"examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Simple Application\" %}\n\nCreate an application named `my-app`:\n\n```shell\nnx g @nx/vue:app my-app\n```\n\n{% /tab %}\n\n{% tab label=\"Specify directory and style extension\" %}\n\nCreate an application named `my-app` in the `my-dir` directory and use `scss` for styles:\n\n{% callout type=\"note\" title=\"Directory Flag Behavior Changes\" %}\nThe command below uses the `as-provided` directory flag behavior, which is the default in Nx 16.8.0. If you're on an earlier version of Nx or using the `derived` option, use `--directory=my-dir`. See the [workspace layout documentation](/reference/nx-json#workspace-layout) for more details.\n{% /callout %}\n\n```shell\nnx g @nx/vue:app my-app --directory=apps/my-dir/my-app --style=scss\n```\n\n{% /tab %}\n\n{% tab label=\"Add tags\" %}\n\nAdd tags to the application (used for linting).\n\n```shell\nnx g @nx/vue:app my-app --tags=scope:admin,type:ui\n```\n\n{% /tab %}\n{% /tabs %}\n",
"presets": []
},
"aliases": ["app"],
"description": "Create a Vue application.",
"implementation": "/packages/vue/src/generators/application/application.ts",
"hidden": false,
"path": "/packages/vue/src/generators/application/schema.json",
"type": "generator"
}

121
docs/generated/packages/vue/generators/component.json Normal file
View File

@ -0,0 +1,121 @@
{
"name": "component",
"factory": "./src/generators/component/component#componentGeneratorInternal",
"schema": {
"$schema": "http://json-schema.org/schema",
"cli": "nx",
"$id": "NxVueComponent",
"title": "Create a Vue Component",
"description": "Create a Vue Component for Nx.",
"type": "object",
"examples": [
{
"command": "nx g component my-component --project=mylib",
"description": "Generate a component in the `mylib` library"
},
{
"command": "nx g component my-component --project=mylib --classComponent",
"description": "Generate a class component in the `mylib` library"
}
],
"properties": {
"project": {
"type": "string",
"description": "The name of the project.",
"alias": "p",
"$default": { "$source": "projectName" },
"x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v18."
},
"name": {
"type": "string",
"description": "The name of the component.",
"$default": { "$source": "argv", "index": 0 },
"x-prompt": "What name would you like to use for the component?",
"x-priority": "important"
},
"nameAndDirectoryFormat": {
"description": "Whether to generate the component in the directory as provided, relative to the current working directory and ignoring the project (`as-provided`) or generate it using the project and directory relative to the workspace root (`derived`).",
"type": "string",
"enum": ["as-provided", "derived"]
},
"js": {
"type": "boolean",
"description": "Generate JavaScript files rather than TypeScript files.",
"default": false
},
"skipTests": {
"type": "boolean",
"description": "When true, does not create `spec.ts` test files for the new component.",
"default": false,
"x-priority": "internal"
},
"directory": {
"type": "string",
"description": "The directory at which to create the component file. When `--nameAndDirectoryFormat=as-provided`, it will be relative to the current working directory. Otherwise, it will be relative to the workspace root.",
"alias": "dir",
"x-priority": "important"
},
"flat": {
"type": "boolean",
"description": "Create component at the source root rather than its own directory.",
"default": false,
"x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. It will be removed in Nx v18."
},
"export": {
"type": "boolean",
"description": "When true, the component is exported from the project `index.ts` (if it exists).",
"alias": "e",
"default": false,
"x-prompt": "Should this component be exported in the project?"
},
"pascalCaseFiles": {
"type": "boolean",
"description": "Use pascal case component file name (e.g. `App.tsx`).",
"alias": "P",
"default": false,
"x-deprecated": "Provide the desired `name` option instead and use the `as-provided` format. It will be removed in Nx v18."
},
"pascalCaseDirectory": {
"type": "boolean",
"description": "Use pascal case directory name (e.g. `App/App.tsx`).",
"alias": "R",
"default": false,
"x-deprecated": "Provide the desired `directory` option instead and use the `as-provided` format. It will be removed in Nx v18."
},
"routing": {
"type": "boolean",
"description": "Generate a library with routes."
},
"fileName": {
"type": "string",
"description": "Create a component with this file name."
},
"inSourceTests": {
"type": "boolean",
"default": false,
"description": "When using Vitest, separate spec files will not be generated and instead will be included within the source files. Read more on the Vitest docs site: https://vitest.dev/guide/in-source.html"
},
"skipFormat": {
"description": "Skip formatting files.",
"type": "boolean",
"default": false,
"x-priority": "internal"
},
"unitTestRunner": {
"type": "string",
"enum": ["vitest", "jest", "none"],
"description": "Test runner to use for unit tests.",
"x-prompt": "What unit test runner should be used?"
}
},
"required": ["name", "project"],
"presets": []
},
"aliases": ["c"],
"x-type": "component",
"description": "Create a Vue component.",
"implementation": "/packages/vue/src/generators/component/component#componentGeneratorInternal.ts",
"hidden": false,
"path": "/packages/vue/src/generators/component/schema.json",
"type": "generator"
}

48
docs/generated/packages/vue/generators/init.json Normal file
View File

@ -0,0 +1,48 @@
{
"name": "init",
"factory": "./src/generators/init/init",
"schema": {
"$schema": "http://json-schema.org/schema",
"$id": "NxVueInit",
"title": "Init Vue Plugin",
"description": "Initialize a Vue Plugin.",
"cli": "nx",
"type": "object",
"properties": {
"skipFormat": {
"description": "Skip formatting files.",
"type": "boolean",
"default": false
},
"js": {
"type": "boolean",
"description": "Use JavaScript instead of TypeScript",
"default": false
},
"rootProject": {
"description": "Create a project at the root of the workspace",
"type": "boolean",
"default": false
},
"routing": {
"type": "boolean",
"description": "Generate application with routes.",
"x-prompt": "Would you like to add Vue Router to this application?",
"default": false
},
"style": {
"description": "The file extension to be used for style files.",
"type": "string",
"default": "css"
}
},
"required": [],
"presets": []
},
"description": "Initialize the `@nx/vue` plugin.",
"aliases": ["ng-add"],
"hidden": true,
"implementation": "/packages/vue/src/generators/init/init.ts",
"path": "/packages/vue/src/generators/init/schema.json",
"type": "generator"
}

148
docs/generated/packages/vue/generators/library.json Normal file
View File

@ -0,0 +1,148 @@
{
"name": "library",
"factory": "./src/generators/library/library",
"schema": {
"$schema": "http://json-schema.org/schema",
"cli": "nx",
"$id": "NxVueLibrary",
"title": "Create a Vue Library",
"description": "Create a Vue Library for an Nx workspace.",
"type": "object",
"examples": [
{
"command": "nx g lib mylib --directory=libs/mylib",
"description": "Generate `libs/mylib`"
},
{
"command": "nx g lib mylib --appProject=myapp",
"description": "Generate a library with routes and add them to `myapp`"
}
],
"properties": {
"name": {
"type": "string",
"description": "Library name",
"$default": { "$source": "argv", "index": 0 },
"x-prompt": "What name would you like to use for the library?",
"pattern": "(?:^@[a-zA-Z0-9-*~][a-zA-Z0-9-*._~]*\\/[a-zA-Z0-9-~][a-zA-Z0-9-._~]*|^[a-zA-Z][^:]*)$",
"x-priority": "important"
},
"directory": {
"type": "string",
"description": "A directory where the lib is placed.",
"alias": "dir",
"x-priority": "important"
},
"projectNameAndRootFormat": {
"description": "Whether to generate the project name and root directory as provided (`as-provided`) or generate them composing their values and taking the configured layout into account (`derived`).",
"type": "string",
"enum": ["as-provided", "derived"]
},
"linter": {
"description": "The tool to use for running lint checks.",
"type": "string",
"enum": ["eslint", "none"],
"default": "eslint"
},
"unitTestRunner": {
"type": "string",
"enum": ["vitest", "jest", "none"],
"description": "Test runner to use for unit tests.",
"x-prompt": "What unit test runner should be used?"
},
"inSourceTests": {
"type": "boolean",
"default": false,
"description": "When using Vitest, separate spec files will not be generated and instead will be included within the source files."
},
"tags": {
"type": "string",
"description": "Add tags to the library (used for linting).",
"alias": "t"
},
"skipFormat": {
"description": "Skip formatting files.",
"type": "boolean",
"default": false,
"x-priority": "internal"
},
"skipTsConfig": {
"type": "boolean",
"default": false,
"description": "Do not update `tsconfig.json` for development experience.",
"x-priority": "internal"
},
"pascalCaseFiles": {
"type": "boolean",
"description": "Use pascal case component file name (e.g. `App.tsx`).",
"alias": "P",
"default": false
},
"routing": {
"type": "boolean",
"description": "Generate library with routes."
},
"appProject": {
"type": "string",
"description": "The application project to add the library route to.",
"alias": "a"
},
"publishable": {
"type": "boolean",
"description": "Create a publishable library."
},
"importPath": {
"type": "string",
"description": "The library name used to import it, like `@myorg/my-awesome-lib`."
},
"component": {
"type": "boolean",
"description": "Generate a default component.",
"default": false
},
"js": {
"type": "boolean",
"description": "Generate JavaScript files rather than TypeScript files.",
"default": false
},
"strict": {
"type": "boolean",
"description": "Whether to enable tsconfig strict mode or not.",
"default": true
},
"setParserOptionsProject": {
"type": "boolean",
"description": "Whether or not to configure the ESLint `parserOptions.project` option. We do not do this by default for lint performance reasons.",
"default": false
},
"bundler": {
"type": "string",
"description": "The bundler to use. Choosing 'none' means this library is not buildable.",
"enum": ["none", "vite"],
"default": "none",
"x-prompt": "Which bundler would you like to use to build the library? Choose 'none' to skip build setup.",
"x-priority": "important"
},
"skipPackageJson": {
"description": "Do not add dependencies to `package.json`.",
"type": "boolean",
"default": false,
"x-priority": "internal"
},
"minimal": {
"description": "Create a Vue library with a minimal setup, no separate test files.",
"type": "boolean",
"default": false
}
},
"required": ["name"],
"presets": []
},
"aliases": ["lib"],
"x-type": "library",
"description": "Create a Vue library.",
"implementation": "/packages/vue/src/generators/library/library.ts",
"hidden": false,
"path": "/packages/vue/src/generators/library/schema.json",
"type": "generator"
}

53
docs/generated/packages/vue/generators/setup-tailwind.json Normal file
View File

@ -0,0 +1,53 @@
{
"name": "setup-tailwind",
"factory": "./src/generators/setup-tailwind/setup-tailwind",
"schema": {
"$schema": "http://json-schema.org/schema",
"cli": "nx",
"$id": "NxVueTailwindSetupGenerator",
"title": "Configures Tailwind CSS for an application or a library.",
"description": "Adds the Tailwind CSS configuration files for a given Vue project and installs, if needed, the packages required for Tailwind CSS to work.",
"type": "object",
"examples": [
{
"command": "nx g setup-tailwind --project=my-app",
"description": "Initialize Tailwind configuration for the `my-app` project."
}
],
"properties": {
"project": {
"type": "string",
"description": "The name of the project to add the Tailwind CSS setup for.",
"alias": "p",
"$default": { "$source": "argv", "index": 0 },
"x-dropdown": "projects",
"x-prompt": "What project would you like to add the Tailwind CSS setup?",
"x-priority": "important"
},
"skipFormat": {
"type": "boolean",
"description": "Skips formatting the workspace after the generator completes.",
"x-priority": "internal"
},
"skipPackageJson": {
"type": "boolean",
"default": false,
"description": "Do not add dependencies to `package.json`.",
"x-priority": "internal"
},
"stylesheet": {
"type": "string",
"description": "Path to the styles entry point relative to the workspace root. This option is only needed if the stylesheet location cannot be found automatically."
}
},
"additionalProperties": false,
"required": ["project"],
"presets": []
},
"description": "Set up Tailwind configuration for a project.",
"implementation": "/packages/vue/src/generators/setup-tailwind/setup-tailwind.ts",
"aliases": [],
"hidden": false,
"path": "/packages/vue/src/generators/setup-tailwind/schema.json",
"type": "generator"
}

72
docs/generated/packages/vue/generators/stories.json Normal file
View File

@ -0,0 +1,72 @@
{
"name": "stories",
"factory": "./src/generators/stories/stories",
"schema": {
"$schema": "http://json-schema.org/schema",
"cli": "nx",
"$id": "NxVueStorybookStories",
"title": "Generate Vue Storybook stories",
"description": "Generate stories/specs for all components declared in a project.",
"type": "object",
"properties": {
"project": {
"type": "string",
"aliases": ["name", "projectName"],
"description": "Project for which to generate stories.",
"$default": { "$source": "projectName", "index": 0 },
"x-prompt": "For which project do you want to generate stories?",
"x-priority": "important"
},
"generateCypressSpecs": {
"type": "boolean",
"description": "Automatically generate `*.spec.ts` files in the cypress e2e app generated by the cypress-configure generator."
},
"cypressProject": {
"type": "string",
"description": "The Cypress project to generate the stories under. This is inferred from `project` by default."
},
"interactionTests": {
"type": "boolean",
"description": "Set up Storybook interaction tests.",
"x-prompt": "Do you want to set up Storybook interaction tests?",
"x-priority": "important",
"default": true
},
"js": {
"type": "boolean",
"description": "Generate JavaScript files rather than TypeScript files.",
"default": false
},
"ignorePaths": {
"type": "array",
"description": "Paths to ignore when looking for components.",
"items": { "type": "string", "description": "Path to ignore." },
"default": [
"*.stories.ts,*.stories.tsx,*.stories.js,*.stories.jsx,*.stories.mdx"
],
"examples": [
"apps/my-app/src/not-stories/**",
"**/**/src/**/not-stories/**",
"libs/my-lib/**/*.something.ts",
"**/**/src/**/*.other.*",
"libs/my-lib/src/not-stories/**,**/**/src/**/*.other.*,apps/my-app/**/*.something.ts"
]
},
"skipFormat": {
"description": "Skip formatting files.",
"type": "boolean",
"default": false,
"x-priority": "internal"
}
},
"required": ["project"],
"examplesFile": "This generator will generate stories for all your components in your project. The stories will be generated using [Component Story Format 3 (CSF3)](https://storybook.js.org/blog/storybook-csf3-is-here/).\n\n```bash\nnx g @nx/vue:stories project-name\n```\n\nYou can read more about how this generator works, in the [Storybook for Vue overview page](/recipes/storybook/overview-vue#auto-generate-stories).\n\nWhen 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- Whether you want to set up [Storybook interaction tests](https://storybook.js.org/docs/angular/writing-tests/interaction-testing) (`interactionTests`). If you choose `yes`, a `play` function will be added to your stories, and all the necessary dependencies will be installed. 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` for the generator to work.\n\nBy default, this generator will also set up [Storybook interaction tests](https://storybook.js.org/docs/angular/writing-tests/interaction-testing). If you don't want to set up Storybook interaction tests, you can pass the `--interactionTests=false` option, but it's not recommended.\n\nThere are a number of other options available. Let's take a look at some examples.\n\n## Examples\n\n### Ignore certain paths when generating stories\n\n```bash\nnx g @nx/vue:stories --name=ui --ignorePaths=libs/ui/src/not-stories/**,**/**/src/**/*.other.*\n```\n\nThis will generate stories for all the components in the `ui` project, except for the ones in the `libs/ui/src/not-stories` directory, and also for components that their file name is of the pattern `*.other.*`.\n\nThis is useful if you have a project that contains components that are not meant to be used in isolation, but rather as part of a larger component.\n\nBy default, Nx will ignore the following paths:\n\n```text\n*.stories.ts, *.stories.tsx, *.stories.js, *.stories.jsx, *.stories.mdx\n```\n\nbut you can change this behaviour easily, as explained above.\n\n### Generate stories using JavaScript instead of TypeScript\n\n```bash\nnx g @nx/vue:stories --name=ui --js=true\n```\n\nThis will generate stories for all the components in the `ui` project using JavaScript instead of TypeScript. So, you will have `.stories.js` files next to your components.\n",
"presets": []
},
"description": "Create stories for all components declared in an app or library.",
"hidden": false,
"implementation": "/packages/vue/src/generators/stories/stories.ts",
"aliases": [],
"path": "/packages/vue/src/generators/stories/schema.json",
"type": "generator"
}

85
docs/generated/packages/vue/generators/storybook-configuration.json Normal file
View File

@ -0,0 +1,85 @@
{
"name": "storybook-configuration",
"factory": "./src/generators/storybook-configuration/configuration",
"schema": {
"$schema": "http://json-schema.org/schema",
"cli": "nx",
"$id": "NxVueStorybookConfigure",
"title": "Vue Storybook Configure",
"description": "Set up Storybook for a Vue project.",
"type": "object",
"properties": {
"name": {
"type": "string",
"aliases": ["project", "projectName"],
"description": "Project for which to generate Storybook configuration.",
"$default": { "$source": "argv", "index": 0 },
"x-prompt": "For which project do you want to generate Storybook configuration?",
"x-dropdown": "projects",
"x-priority": "important"
},
"interactionTests": {
"type": "boolean",
"description": "Set up Storybook interaction tests.",
"x-prompt": "Do you want to set up Storybook interaction tests?",
"x-priority": "important",
"alias": ["configureTestRunner"],
"default": true
},
"generateStories": {
"type": "boolean",
"description": "Automatically generate `*.stories.ts` files for components declared in this project?",
"x-prompt": "Automatically generate *.stories.ts files for components declared in this project?",
"default": true,
"x-priority": "important"
},
"configureStaticServe": {
"type": "boolean",
"description": "Specifies whether to configure a static file server target for serving storybook. Helpful for speeding up CI build/test times.",
"x-prompt": "Configure a static file server for the storybook instance?",
"default": true,
"x-priority": "important"
},
"js": {
"type": "boolean",
"description": "Generate JavaScript story files rather than TypeScript story files.",
"default": false
},
"tsConfiguration": {
"type": "boolean",
"description": "Configure your project with TypeScript. Generate main.ts and preview.ts files, instead of main.js and preview.js.",
"default": true
},
"linter": {
"description": "The tool to use for running lint checks.",
"type": "string",
"enum": ["eslint"],
"default": "eslint"
},
"ignorePaths": {
"type": "array",
"description": "Paths to ignore when looking for components.",
"items": { "type": "string", "description": "Path to ignore." },
"default": [
"*.stories.ts,*.stories.tsx,*.stories.js,*.stories.jsx,*.stories.mdx"
],
"examples": [
"apps/my-app/src/not-stories/**",
"**/**/src/**/not-stories/**",
"libs/my-lib/**/*.something.ts",
"**/**/src/**/*.other.*",
"libs/my-lib/src/not-stories/**,**/**/src/**/*.other.*,apps/my-app/**/*.something.ts"
]
}
},
"required": ["name"],
"examplesFile": "This generator will set up Storybook for your **Vue** project. You can also use this generator to generate Storybook configuration for your **Next.js** project. By default, starting Nx 16, Storybook v7 is used.\n\n```bash\nnx g @nx/vue:storybook-configuration project-name\n```\n\nYou can read more about how this generator works, in the [Storybook for Vue overview page](/recipes/storybook/overview-vue#generate-storybook-configuration-for-a-vue-project).\n\nWhen 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- Whether you want to set up [Storybook interaction tests](https://storybook.js.org/docs/vue/writing-tests/interaction-testing) (`interactionTests`). If you choose `yes`, a `play` function will be added to your stories, and 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/vue/writing-tests/test-runner). You can read more about this in the [Nx Storybook interaction tests documentation page](/packages/storybook/documents/interaction-tests)..\n- Whether you want to `generateStories` for the components in your project. If you choose `yes`, a `.stories.ts` file will be generated next to each of your components in your project.\n\nYou must provide a `name` for the generator to work.\n\nBy default, this generator will also set up [Storybook interaction tests](https://storybook.js.org/docs/vue/writing-tests/interaction-testing). If you don't want to set up Storybook interaction tests, you can pass the `--interactionTests=false` option, but it's not recommended.\n\nThere are a number of other options available. Let's take a look at some examples.\n\n## Examples\n\n### Generate Storybook configuration\n\n```bash\nnx g @nx/vue:storybook-configuration ui\n```\n\nThis will generate Storybook configuration for the `ui` project using TypeScript for the Storybook configuration files (the files inside the `.storybook` directory, eg. `.storybook/main.ts`).\n\n### Ignore certain paths when generating stories\n\n```bash\nnx g @nx/vue:storybook-configuration ui --generateStories=true --ignorePaths=libs/ui/src/not-stories/**,**/**/src/**/*.other.*,apps/my-app/**/*.something.ts\n```\n\nThis will generate a Storybook configuration for the `ui` project and generate stories for all components in the `libs/ui/src/lib` directory, except for the ones in the `libs/ui/src/not-stories` directory, and the ones in the `apps/my-app` directory that end with `.something.ts`, and also for components that their file name is of the pattern `*.other.*`.\n\nThis is useful if you have a project that contains components that are not meant to be used in isolation, but rather as part of a larger component.\n\nBy default, Nx will ignore the following paths:\n\n```text\n*.stories.ts, *.stories.tsx, *.stories.js, *.stories.jsx, *.stories.mdx\n```\n\nbut you can change this behaviour easily, as explained above.\n\n### Generate stories using JavaScript instead of TypeScript\n\n```bash\nnx g @nx/vue:storybook-configuration ui --generateStories=true --js=true\n```\n\nThis will generate stories for all the components in the `ui` project using JavaScript instead of TypeScript. So, you will have `.stories.js` files next to your components.\n\n### Generate Storybook configuration using JavaScript\n\n```bash\nnx g @nx/vue:storybook-configuration ui --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": "Set up storybook for a Vue app or library.",
"hidden": false,
"implementation": "/packages/vue/src/generators/storybook-configuration/configuration.ts",
"aliases": [],
"path": "/packages/vue/src/generators/storybook-configuration/schema.json",
"type": "generator"
}

7
docs/map.json
View File

@ -713,6 +713,13 @@
"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": "Configuring Storybook on Nx",
"id": "configuring-storybook",

10
docs/shared/packages/storybook/best-practices.md
View File

@ -39,18 +39,22 @@ If you are on a project using Angular, React or React Native, you can also gener
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 React (and Next.js) 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:
- [React (and Next.js) stories generator](/nx-api/react/generators/stories)
- [React Native stories generator](/nx-api/react-native/generators/stories)
- [Angular stories generator](/nx-api/angular/generators/stories)
- [Vue stories generator](/nx-api/vue/generators/stories)
- [React Native stories generator](/nx-api/react-native/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.
#### Storybook interaction tests

12
docs/shared/packages/storybook/plugin-overview.md
View File

@ -72,13 +72,6 @@ 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" %}
@ -91,7 +84,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)), 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)), in the field `uiFramework` you must choose one of the following Storybook frameworks:
- `@storybook/angular`
- `@storybook/html-webpack5`
@ -118,7 +111,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/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), [`@nx/vue:storybook-configuration`](/nx-api/vue/generators/storybook-configuration) as shown above.
### Running Storybook
@ -217,6 +210,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).

4
docs/shared/packages/vue/vue-plugin.md
View File

@ -49,12 +49,12 @@ pnpm install -D @nx/vue
To generate a Vue application, run the following:
```bash
```shell
nx g @nx/vue:app my-app
```
To generate a Vue library, run the following:
```bash
```shell
nx g @nx/vue:lib my-lib
```

80
docs/shared/recipes/storybook/plugin-vue.md Normal file
View File

@ -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](/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).

12
docs/shared/reference/sitemap.md
View File

@ -121,6 +121,7 @@
- [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)
- [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)
@ -621,6 +622,17 @@
- [init](/nx-api/vite/generators/init)
- [configuration](/nx-api/vite/generators/configuration)
- [vitest](/nx-api/vite/generators/vitest)
- [vue](/nx-api/vue)
- [documents](/nx-api/vue/documents)
- [Overview of the Nx Vue Plugin](/nx-api/vue/documents/overview)
- [generators](/nx-api/vue/generators)
- [init](/nx-api/vue/generators/init)
- [application](/nx-api/vue/generators/application)
- [library](/nx-api/vue/generators/library)
- [component](/nx-api/vue/generators/component)
- [setup-tailwind](/nx-api/vue/generators/setup-tailwind)
- [storybook-configuration](/nx-api/vue/generators/storybook-configuration)
- [stories](/nx-api/vue/generators/stories)
- [web](/nx-api/web)
- [documents](/nx-api/web/documents)
- [Overview](/nx-api/web/documents/overview)

1
nx-dev/nx-dev/public/images/icons/vuedotjs.svg Normal file
View File

@ -0,0 +1 @@
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Vue.js</title><path d="M24,1.61H14.06L12,5.16,9.94,1.61H0L12,22.39ZM12,14.08,5.16,2.23H9.59L12,6.41l2.41-4.18h4.43Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 202 B

1
nx-dev/ui-references/src/lib/icons-map.ts
View File

@ -25,6 +25,7 @@ export const iconsMap: Record<string, string> = {
rspack: '/images/icons/rspack.svg',
storybook: '/images/icons/storybook.svg',
vite: '/images/icons/vite.svg',
vue: '/images/icons/vuedotjs.svg',
web: '/images/icons/html5.svg',
webpack: '/images/icons/webpack.svg',
workspace: '/images/icons/nx.svg',

2
packages/storybook/docs/configuration-generator-examples.md
View File

@ -21,6 +21,8 @@ If you are using Angular, React, Next.js, Vue or React Native in your project, i
- [React Native Storybook Configuration Generator](/nx-api/react-native/generators/storybook-configuration)
- [Vue Storybook Configuration Generator](/nx-api/vue/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:
- The `name` of the project you want to generate the configuration for.

10
packages/vue/docs/application-examples.md
View File

@ -5,16 +5,6 @@
Create an application named `my-app`:
```shell
nx g @nx/vue:application my-app
```
{% /tab %}
{% tab label="Application using Vite as bundler" %}
Create an application named `my-app`:
```shell
nx g @nx/vue:app my-app
```

2
packages/vue/src/generators/component/schema.json
View File

@ -110,5 +110,5 @@
"x-prompt": "What unit test runner should be used?"
}
},
"required": ["name"]
"required": ["name", "project"]
}

3
scripts/documentation/package-schemas/package-metadata.ts
View File

@ -121,9 +121,6 @@ export function findPackageMetadataList(
.map((folderPath: string): PackageData => {
const folderName = folderPath.substring(packagesDir.length + 1);
// TODO(v17): Remove this once @nx/vue is published
if (folderName === 'vue') return null;
const relativeFolderPath = folderPath.replace(absoluteRoot, '');
const packageJson = readJsonSync(
join(folderPath, 'package.json'),