8fa7065cf1
This PR updates examples in `.md` files (both docs and blog posts) to use positional args. Nx 20 changes the position arg to be either `directory` for apps/libs or `path` for artifacts (e.g. components). So before you'd do this: ``` nx g app myapp --directory=apps/myapp nx g lib mylib --directory=libs/mylib nx g lib mylib --directory=libs/nested/mylib nx g lib @acme/foo --directory=libs/@acme/foo --importPath=@acme/foo nx g component foo --directory=libs/ui/src/foo --pascalCaseFiles ``` Will now be simplified to ``` nx g app apps/myapp nx g lib libs/mylib nx g lib libs/nested/mylib nx g lib libs/@acme/foo # name and import path are both "@acme/foo" nx g component libs/ui/src/foo/Foo ``` For cases where `name` and `importPath` need to be changed, you can always manually specify them. ``` nx g lib libs/nested/foo # name is foo nx g lib libs/nested/foo --name=nested-foo # specify name with prefix nx g lib libs/@acme/foo --name # use "foo" as name and don't match importPath nx g lib libs/@internal/foo --importPath=@acme/foo # different importPath from name <!-- If this is a particularly complex change or feature addition, you can request a dedicated Nx release for this pull request branch. Mention someone from the Nx team or the `@nrwl/nx-pipelines-reviewers` and they will confirm if the PR warrants its own release for testing purposes, and generate it for you if appropriate. --> ## Current Behavior <!-- This is the behavior we have today --> ## Expected Behavior <!-- This is the behavior we should expect with the changes in this PR --> ## Related Issue(s) <!-- Please link the issue being fixed so it gets closed when this is merged. --> Fixes #
105 lines
4.0 KiB
Markdown
105 lines
4.0 KiB
Markdown
---
|
|
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 @nx/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
|
|
```
|
|
|
|
### Installation
|
|
|
|
{% callout type="note" title="Keep Nx Package Versions In Sync" %}
|
|
Make sure to install the `@nx/nuxt` version that matches the version of `nx` in your repository. If the version numbers get out of sync, you can encounter some difficult to debug errors. You can [fix Nx version mismatches with this recipe](/recipes/tips-n-tricks/keep-nx-versions-in-sync).
|
|
{% /callout %}
|
|
|
|
In any Nx workspace, you can install `@nx/nuxt` by running the following command:
|
|
|
|
```shell {% skipRescope=true %}
|
|
nx add @nx/nuxt
|
|
```
|
|
|
|
This will install the correct version of `@nx/nuxt`.
|
|
|
|
### How @nx/nuxt Infers Tasks
|
|
|
|
The `@nx/nuxt` plugin will create a task for any project that has an Nuxt configuration file present. Any of the following files will be recognized as an Nuxt configuration file:
|
|
|
|
- `nuxt.config.js`
|
|
- `nuxt.config.ts`
|
|
- `nuxt.config.mjs`
|
|
- `nuxt.config.mts`
|
|
- `nuxt.config.cjs`
|
|
- `nuxt.config.cts`
|
|
|
|
### View Inferred Tasks
|
|
|
|
To view inferred tasks for a project, open the [project details view](/concepts/inferred-tasks) in Nx Console or run `nx show project my-project --web` in the command line.
|
|
|
|
### @nx/nuxt Configuration
|
|
|
|
The `@nx/nuxt/plugin` is configured in the `plugins` array in `nx.json`.
|
|
|
|
```json {% fileName="nx.json" %}
|
|
{
|
|
"plugins": [
|
|
{
|
|
"plugin": "@nx/nuxt/plugin",
|
|
"options": {
|
|
"buildTargetName": "build",
|
|
"testTargetName": "test",
|
|
"serveTargetName": "serve",
|
|
"buildStaticTargetName": "build-static",
|
|
"serveStaticTargetName": "serve-static"
|
|
}
|
|
}
|
|
]
|
|
}
|
|
```
|
|
|
|
The `buildTargetName`, `testTargetName` and `serveTargetName` options control the names of the inferred Nuxt tasks. The default names are `build`, `test` and `serve`.
|
|
|
|
The `buildStaticTargetName` and `serveStaticTargetName` options control the names of the inferred Nuxt static tasks. The default names are `build-static` and `serve-static`.
|
|
|
|
## Using Nuxt
|
|
|
|
### Generate a new Nuxt app
|
|
|
|
```shell
|
|
nx g @nx/nuxt:app apps/my-app
|
|
```
|
|
|
|
### Deploy a Nuxt app
|
|
|
|
Once you are ready to deploy your Nuxt application, you have absolute freedom to choose any hosting provider that fits your needs.
|
|
|
|
We have detailed [how to deploy your Nuxt application to Vercel in a separate guide](/recipes/nuxt/deploy-nuxt-to-vercel).
|
|
|
|
### E2E testing
|
|
|
|
By default `nuxt` **does not** generate static HTML files when you run the `build` command. However, Nx provides a `build-static` target that you can use to generate static HTML files for your Nuxt application. Essentially, this target runs the `nuxt build --prerender` command to generate static HTML files.
|
|
|
|
To perform end-to-end (E2E) testing on static HTML files using a test runner like Cypress. When you create a Nuxt application, Nx automatically creates a `serve-static` target. This target is designed to serve the static HTML files produced by the `build-static` command.
|
|
|
|
This feature is particularly useful for testing in continuous integration (CI) pipelines, where resources may be constrained. Unlike the `serve` target, `serve-static` does not require a Nuxt's Nitro server to operate, making it more efficient and faster by eliminating background processes, such as file change monitoring.
|
|
|
|
To utilize the `serve-static` target for testing, run the following command:
|
|
|
|
```shell
|
|
nx serve-static my-nuxt-app-e2e
|
|
```
|
|
|
|
This command performs several actions:
|
|
|
|
1. It will build the Nuxt application and generate the static HTML files.
|
|
2. It will serve the static HTML files using a simple HTTP server.
|
|
3. It will run the Cypress tests against the served static HTML files.
|