@nx/nuxt:application
Create a Nuxt Application for Nx.
Monorepo World: October 7, 2024Monorepo World: October 7, 2024Join us!
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:
pages
NxWelcome
) under components
greet
API endpoint that returns a JSON response under /api/greet
vitest
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.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
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
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
The directory of the new application.
^[a-zA-Z][^:]*$
The name of the application.
playwright
playwright
, cypress
, none
Test runner to use for end to end (E2E) tests.
false
Generate JavaScript files rather than TypeScript files.
eslint
eslint
The tool to use for running lint checks.
css
The file extension to be used for style files.
false
Whether or not to configure the ESLint parserOptions.project
option. We do not do this by default for lint performance reasons.
Add tags to the application (used for linting).
none
vitest
, none
Test runner to use for unit tests.
false
Create an application at the root of the workspace.
false
Skip formatting files.
false
Do not add dependencies to package.json
.
Join us live for exciting talks on developer tooling and monorepos! Catch the action on YouTube and join the conversation on Discord!