diff --git a/docs/generated/manifests/menus.json b/docs/generated/manifests/menus.json index 981313f97e..d33ed6d42f 100644 --- a/docs/generated/manifests/menus.json +++ b/docs/generated/manifests/menus.json @@ -8062,6 +8062,65 @@ "isExternal": false, "disableCollapsible": false }, + { + "id": "nuxt", + "path": "/nx-api/nuxt", + "name": "nuxt", + "children": [ + { + "id": "documents", + "path": "/nx-api/nuxt/documents", + "name": "documents", + "children": [ + { + "name": "Overview of the Nx Nuxt Plugin", + "path": "/nx-api/nuxt/documents/overview", + "id": "overview", + "isExternal": false, + "children": [], + "disableCollapsible": false + } + ], + "isExternal": false, + "disableCollapsible": false + }, + { + "id": "generators", + "path": "/nx-api/nuxt/generators", + "name": "generators", + "children": [ + { + "id": "init", + "path": "/nx-api/nuxt/generators/init", + "name": "init", + "children": [], + "isExternal": false, + "disableCollapsible": false + }, + { + "id": "application", + "path": "/nx-api/nuxt/generators/application", + "name": "application", + "children": [], + "isExternal": false, + "disableCollapsible": false + }, + { + "id": "storybook-configuration", + "path": "/nx-api/nuxt/generators/storybook-configuration", + "name": "storybook-configuration", + "children": [], + "isExternal": false, + "disableCollapsible": false + } + ], + "isExternal": false, + "disableCollapsible": false + } + ], + "isExternal": false, + "disableCollapsible": false + }, { "id": "nx", "path": "/nx-api/nx", diff --git a/docs/generated/manifests/nx-api.json b/docs/generated/manifests/nx-api.json index e2c22cf23f..9cacbfe53e 100644 --- a/docs/generated/manifests/nx-api.json +++ b/docs/generated/manifests/nx-api.json @@ -1513,6 +1513,58 @@ }, "path": "/nx-api/node" }, + "nuxt": { + "githubRoot": "https://github.com/nrwl/nx/blob/master", + "name": "nuxt", + "packageName": "@nx/nuxt", + "description": "The Nuxt plugin for Nx contains executors and generators for managing Nuxt applications and libraries within an Nx workspace. It provides:\n\n\n- Integration with libraries such as Vitest, 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/nuxt/documents/overview": { + "id": "overview", + "name": "Overview of the Nx Nuxt Plugin", + "description": "The Nx Plugin for Nuxt contains generators for managing Nuxt applications within a Nx workspace. This page also explains how to configure Nuxt on your Nx workspace.", + "file": "generated/packages/nuxt/documents/overview", + "itemList": [], + "isExternal": false, + "path": "/nx-api/nuxt/documents/overview", + "tags": [], + "originalFilePath": "shared/packages/nuxt/nuxt-plugin" + } + }, + "root": "/packages/nuxt", + "source": "/packages/nuxt/src", + "executors": {}, + "generators": { + "/nx-api/nuxt/generators/init": { + "description": "Initialize the `@nx/nuxt` plugin.", + "file": "generated/packages/nuxt/generators/init.json", + "hidden": true, + "name": "init", + "originalFilePath": "/packages/nuxt/src/generators/init/schema.json", + "path": "/nx-api/nuxt/generators/init", + "type": "generator" + }, + "/nx-api/nuxt/generators/application": { + "description": "Create a Nuxt application.", + "file": "generated/packages/nuxt/generators/application.json", + "hidden": false, + "name": "application", + "originalFilePath": "/packages/nuxt/src/generators/application/schema.json", + "path": "/nx-api/nuxt/generators/application", + "type": "generator" + }, + "/nx-api/nuxt/generators/storybook-configuration": { + "description": "Set up storybook for a Nuxt app.", + "file": "generated/packages/nuxt/generators/storybook-configuration.json", + "hidden": false, + "name": "storybook-configuration", + "originalFilePath": "/packages/nuxt/src/generators/storybook-configuration/schema.json", + "path": "/nx-api/nuxt/generators/storybook-configuration", + "type": "generator" + } + }, + "path": "/nx-api/nuxt" + }, "nx": { "githubRoot": "https://github.com/nrwl/nx/blob/master", "name": "nx", diff --git a/docs/generated/packages-metadata.json b/docs/generated/packages-metadata.json index 37099f184f..caa8ae34dc 100644 --- a/docs/generated/packages-metadata.json +++ b/docs/generated/packages-metadata.json @@ -1497,6 +1497,57 @@ "root": "/packages/node", "source": "/packages/node/src" }, + { + "description": "The Nuxt plugin for Nx contains executors and generators for managing Nuxt applications and libraries within an Nx workspace. It provides:\n\n\n- Integration with libraries such as Vitest, 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 Nuxt Plugin", + "description": "The Nx Plugin for Nuxt contains generators for managing Nuxt applications within a Nx workspace. This page also explains how to configure Nuxt on your Nx workspace.", + "file": "generated/packages/nuxt/documents/overview", + "itemList": [], + "isExternal": false, + "path": "nuxt/documents/overview", + "tags": [], + "originalFilePath": "shared/packages/nuxt/nuxt-plugin" + } + ], + "executors": [], + "generators": [ + { + "description": "Initialize the `@nx/nuxt` plugin.", + "file": "generated/packages/nuxt/generators/init.json", + "hidden": true, + "name": "init", + "originalFilePath": "/packages/nuxt/src/generators/init/schema.json", + "path": "nuxt/generators/init", + "type": "generator" + }, + { + "description": "Create a Nuxt application.", + "file": "generated/packages/nuxt/generators/application.json", + "hidden": false, + "name": "application", + "originalFilePath": "/packages/nuxt/src/generators/application/schema.json", + "path": "nuxt/generators/application", + "type": "generator" + }, + { + "description": "Set up storybook for a Nuxt app.", + "file": "generated/packages/nuxt/generators/storybook-configuration.json", + "hidden": false, + "name": "storybook-configuration", + "originalFilePath": "/packages/nuxt/src/generators/storybook-configuration/schema.json", + "path": "nuxt/generators/storybook-configuration", + "type": "generator" + } + ], + "githubRoot": "https://github.com/nrwl/nx/blob/master", + "name": "nuxt", + "packageName": "@nx/nuxt", + "root": "/packages/nuxt", + "source": "/packages/nuxt/src" + }, { "description": "The core Nx plugin contains the core functionality of Nx like the project graph, nx commands and task orchestration.", "documents": [ diff --git a/docs/generated/packages/nuxt/documents/overview.md b/docs/generated/packages/nuxt/documents/overview.md new file mode 100644 index 0000000000..0284b6abdc --- /dev/null +++ b/docs/generated/packages/nuxt/documents/overview.md @@ -0,0 +1,52 @@ +--- +title: Overview of the Nx Nuxt Plugin +description: The Nx Plugin for Nuxt contains generators for managing Nuxt applications within a Nx workspace. This page also explains how to configure Nuxt on your Nx workspace. +--- + +The Nx plugin for [Nuxt](https://nuxt.com/). + +## Setting up a new Nx workspace with Nuxt + +You can create a new workspace that uses Nuxt with one of the following commands: + +- Generate a new monorepo with a Nuxt app + +```shell +npx create-nx-workspace@latest --preset=nuxt +``` + +## Add Nuxt to an existing workspace + +There are a number of ways to use Nuxt in your existing workspace. + +### Install the `@nx/nuxt` plugin + +{% tabs %} +{% tab label="npm" %} + +```shell +npm install -D @nx/nuxt +``` + +{% /tab %} +{% tab label="yarn" %} + +```shell +yarn add -D @nx/nuxt +``` + +{% /tab %} +{% tab label="pnpm" %} + +```shell +pnpm install -D @nx/nuxt +``` + +{% /tab %} +{% /tabs %} + +### Generate a new Nuxt app + +```shell +nx g @nx/nuxt:app my-app +``` diff --git a/docs/generated/packages/nuxt/generators/application.json b/docs/generated/packages/nuxt/generators/application.json new file mode 100644 index 0000000000..98638f3da4 --- /dev/null +++ b/docs/generated/packages/nuxt/generators/application.json @@ -0,0 +1,118 @@ +{ + "name": "application", + "factory": "./src/generators/application/application", + "schema": { + "$schema": "http://json-schema.org/schema", + "cli": "nx", + "$id": "NxNuxtApp", + "title": "Create a Nuxt Application for Nx", + "description": "Create a Nuxt Application for Nx.", + "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][^:]*$", + "x-priority": "important" + }, + "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"] + }, + "linter": { + "description": "The tool to use for running lint checks.", + "type": "string", + "enum": ["eslint"], + "default": "eslint" + }, + "skipFormat": { + "description": "Skip formatting files.", + "type": "boolean", + "default": false, + "x-priority": "internal" + }, + "unitTestRunner": { + "type": "string", + "enum": ["vitest", "none"], + "description": "Test runner to use for unit tests.", + "x-prompt": "Which unit test runner would you like to use?", + "default": "none" + }, + "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 + }, + "skipPackageJson": { + "type": "boolean", + "default": false, + "description": "Do not add dependencies to `package.json`.", + "x-priority": "internal" + }, + "rootProject": { + "description": "Create an application at the root of the workspace.", + "type": "boolean", + "default": false, + "hidden": true, + "x-priority": "internal" + }, + "style": { + "description": "The file extension to be used for style files.", + "type": "string", + "alias": "s", + "default": "css", + "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" } + ] + } + }, + "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 + } + }, + "required": [], + "examplesFile": "---\ntitle: Nuxt application generator examples\ndescription: This page contains examples for the @nx/nuxt:app generator.\n---\n\nYour new Nuxt application will be generated with the following directory structure, following the suggested [directory structure](https://nuxt.com/docs/guide/directory-structure) for Nuxt applications:\n\n```text\nmy-nuxt-app\n├── nuxt.config.ts\n├── project.json\n├── src\n│   ├── app.vue\n│   ├── assets\n│   │   └── css\n│   │   └── styles.css\n│   ├── components\n│   │   └── NxWelcome.vue\n│   ├── pages\n│   │   ├── about.vue\n│   │   └── index.vue\n│   ├── public\n│   │   └── favicon.ico\n│   └── server\n│   ├── api\n│   │   └── greet.ts\n│   └── tsconfig.json\n├── tsconfig.app.json\n├── tsconfig.json\n├── tsconfig.spec.json\n└── vitest.config.ts\n```\n\nYour new app will contain the following:\n\n- Two pages (home and about) under `pages`\n- A component (`NxWelcome`) under `components`\n- A `greet` API endpoint that returns a JSON response under `/api/greet`\n- Configuration for `vitest`\n- Your app's entrypoint (`app.vue`) will contain the navigation links to the home and about pages, and the `nuxt-page` component to display the contents of your pages.\n\n## Examples\n\n{% tabs %}\n{% tab label=\"Create app in a directory\" %}\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=nested`. See the [as-provided vs. derived documentation](/deprecated/as-provided-vs-derived) for more details.\n{% /callout %}\n\n```shell\nnx g @nx/nuxt:app myapp --directory=apps/nested/myapp\n```\n\n{% /tab %}\n\n{% tab label=\"Create app with vitest configured\" %}\n\n```shell\nnx g @nx/nuxt:app myapp --directory=apps/nested/myapp --unitTestRunner=vitest\n```\n\n{% /tab %}\n\n{% tab label=\"Use plain JavaScript (not TypeScript)\" %}\n\n```shell\nnx g @nx/nuxt:app myapp --js\n```\n\n{% /tab %}\n{% /tabs %}\n\n## Generate pages and components\n\nYou can use the the [`@nx/vue:component` generator](/nx-api/vue/generators/component) to generate new pages and components for your application. You can read more on the [`@nx/vue:component` generator documentation page](/nx-api/vue/generators/component), but here are some examples:\n\n{% tabs %}\n{% tab label=\"New page\" %}\n\n```shell\nnx g @nx/nuxt:component --directory=my-app/src/pages --name=my-page\n```\n\n{% /tab %}\n\n{% tab label=\"New component\" %}\n\n```shell\nnx g @nx/nuxt:component --directory=my-app/src/components/my-cmp --name=my-cmp\n```\n\n{% /tab %}\n{% /tabs %}\n", + "presets": [] + }, + "aliases": ["app"], + "description": "Create a Nuxt application.", + "implementation": "/packages/nuxt/src/generators/application/application.ts", + "hidden": false, + "path": "/packages/nuxt/src/generators/application/schema.json", + "type": "generator" +} diff --git a/docs/generated/packages/nuxt/generators/init.json b/docs/generated/packages/nuxt/generators/init.json new file mode 100644 index 0000000000..6355eef565 --- /dev/null +++ b/docs/generated/packages/nuxt/generators/init.json @@ -0,0 +1,42 @@ +{ + "name": "init", + "factory": "./src/generators/init/init", + "schema": { + "$schema": "http://json-schema.org/schema", + "$id": "NxNuxtInit", + "title": "Init Nuxt Plugin", + "description": "Initialize a Nuxt Plugin.", + "cli": "nx", + "type": "object", + "properties": { + "skipFormat": { + "description": "Skip formatting files.", + "type": "boolean", + "default": false + }, + "rootProject": { + "description": "Create a project at the root of the workspace", + "type": "boolean", + "default": false + }, + "skipPackageJson": { + "description": "Do not add dependencies to `package.json`.", + "type": "boolean", + "default": false + }, + "style": { + "description": "The file extension to be used for style files.", + "type": "string", + "default": "css" + } + }, + "required": [], + "presets": [] + }, + "description": "Initialize the `@nx/nuxt` plugin.", + "aliases": ["ng-add"], + "hidden": true, + "implementation": "/packages/nuxt/src/generators/init/init.ts", + "path": "/packages/nuxt/src/generators/init/schema.json", + "type": "generator" +} diff --git a/docs/generated/packages/nuxt/generators/storybook-configuration.json b/docs/generated/packages/nuxt/generators/storybook-configuration.json new file mode 100644 index 0000000000..b3638ff3c5 --- /dev/null +++ b/docs/generated/packages/nuxt/generators/storybook-configuration.json @@ -0,0 +1,85 @@ +{ + "name": "storybook-configuration", + "factory": "./src/generators/storybook-configuration/configuration", + "schema": { + "$schema": "http://json-schema.org/schema", + "cli": "nx", + "$id": "NxNuxtStorybookConfigure", + "title": "Nuxt Storybook Configure", + "description": "Set up Storybook for a Nuxt project.", + "type": "object", + "properties": { + "project": { + "type": "string", + "aliases": ["name", "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": ["project"], + "examplesFile": "---\ntitle: Storybook configuration generator examples\ndescription: This page contains examples for the @nx/nuxt:storybook-configuration generator.\n---\n\nThis generator calls the `@nx/vue:storybook-configuration` generator under the hood. It will set up Storybook for your **Nuxt** project.\n\n```bash\nnx g @nx/nuxt: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/nuxt: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/nuxt: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/nuxt: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/nuxt: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 Nuxt app.", + "hidden": false, + "implementation": "/packages/nuxt/src/generators/storybook-configuration/configuration.ts", + "aliases": [], + "path": "/packages/nuxt/src/generators/storybook-configuration/schema.json", + "type": "generator" +} diff --git a/docs/shared/reference/sitemap.md b/docs/shared/reference/sitemap.md index f7e296d911..85bc903ad4 100644 --- a/docs/shared/reference/sitemap.md +++ b/docs/shared/reference/sitemap.md @@ -505,6 +505,13 @@ - [application](/nx-api/node/generators/application) - [library](/nx-api/node/generators/library) - [setup-docker](/nx-api/node/generators/setup-docker) + - [nuxt](/nx-api/nuxt) + - [documents](/nx-api/nuxt/documents) + - [Overview of the Nx Nuxt Plugin](/nx-api/nuxt/documents/overview) + - [generators](/nx-api/nuxt/generators) + - [init](/nx-api/nuxt/generators/init) + - [application](/nx-api/nuxt/generators/application) + - [storybook-configuration](/nx-api/nuxt/generators/storybook-configuration) - [nx](/nx-api/nx) - [documents](/nx-api/nx/documents) - [create-nx-workspace](/nx-api/nx/documents/create-nx-workspace) diff --git a/packages/nuxt/package.json b/packages/nuxt/package.json index 38c764b809..47b5d11589 100644 --- a/packages/nuxt/package.json +++ b/packages/nuxt/package.json @@ -1,7 +1,7 @@ { "name": "@nx/nuxt", "version": "0.0.1", - "private": true, + "private": false, "description": "The Nuxt plugin for Nx contains executors and generators for managing Nuxt applications and libraries within an Nx workspace. It provides:\n\n\n- Integration with libraries such as Vitest, 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.", "repository": { "type": "git",