@nx/nuxt:application

Create a Nuxt Application for Nx.

Your new Nuxt application will be generated with the following directory structure, following the suggested directory structure for Nuxt applications:

1my-nuxt-app 2โ”œโ”€โ”€ nuxt.config.ts 3โ”œโ”€โ”€ project.json 4โ”œโ”€โ”€ src 5โ”‚ย ย  โ”œโ”€โ”€ app.vue 6โ”‚ย ย  โ”œโ”€โ”€ assets 7โ”‚ย ย  โ”‚ย ย  โ””โ”€โ”€ css 8โ”‚ย ย  โ”‚ย ย  โ””โ”€โ”€ styles.css 9โ”‚ย ย  โ”œโ”€โ”€ components 10โ”‚ย ย  โ”‚ย ย  โ””โ”€โ”€ NxWelcome.vue 11โ”‚ย ย  โ”œโ”€โ”€ pages 12โ”‚ย ย  โ”‚ย ย  โ”œโ”€โ”€ about.vue 13โ”‚ย ย  โ”‚ย ย  โ””โ”€โ”€ index.vue 14โ”‚ย ย  โ”œโ”€โ”€ public 15โ”‚ย ย  โ”‚ย ย  โ””โ”€โ”€ favicon.ico 16โ”‚ย ย  โ””โ”€โ”€ server 17โ”‚ย ย  โ”œโ”€โ”€ api 18โ”‚ย ย  โ”‚ย ย  โ””โ”€โ”€ greet.ts 19โ”‚ย ย  โ””โ”€โ”€ tsconfig.json 20โ”œโ”€โ”€ tsconfig.app.json 21โ”œโ”€โ”€ tsconfig.json 22โ”œโ”€โ”€ tsconfig.spec.json 23โ””โ”€โ”€ vitest.config.ts 24

Your new app will contain the following:

  • Two pages (home and about) under pages
  • A component (NxWelcome) under components
  • A greet API endpoint that returns a JSON response under /api/greet
  • Configuration for vitest
  • 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.

Examples

Directory Flag Behavior Changes

The 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 for more details.

โฏ

nx g @nx/nuxt:app =apps/nested/myapp

Generate pages and components

You can use the the @nx/vue:component generator to generate new pages and components for your application. You can read more on the @nx/vue:component generator documentation page, but here are some examples:

โฏ

nx g @nx/nuxt:component my-app/src/pages/my-page

Usage

1nx generate application ... 2
1nx g app ... #same 2

By default, Nx will search for application in the default collection provisioned in workspace.json.

You can specify the collection explicitly as follows:

1nx g @nx/nuxt:application ... 2

Show what will be generated without writing to disk:

1nx g application ... --dry-run 2

Options

directory

dirRequired
string

The directory of the new application.

name

string
Pattern: ^[a-zA-Z][^:]*$

The name of the application.

e2eTestRunner

string
Default: playwright
Accepted values: playwright, cypress, none

Test runner to use for end to end (E2E) tests.

js

boolean
Default: false

Generate JavaScript files rather than TypeScript files.

linter

string
Default: eslint
Accepted values: eslint

The tool to use for running lint checks.

style

s
string
Default: css

The file extension to be used for style files.

setParserOptionsProject

boolean
Default: false

Whether or not to configure the ESLint parserOptions.project option. We do not do this by default for lint performance reasons.

tags

t
string

Add tags to the application (used for linting).

unitTestRunner

string
Default: none
Accepted values: vitest, none

Test runner to use for unit tests.

rootProject

InternalHidden
boolean
Default: false

Create an application at the root of the workspace.

skipFormat

Internal
boolean
Default: false

Skip formatting files.

skipPackageJson

Internal
boolean
Default: false

Do not add dependencies to package.json.