@nx/nuxt:application
Create a Nuxt Application for Nx.
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
.
Watch the replays of exciting talks on developer tooling and monorepos! Catch all the insightful presentations from the event on our YouTube channel.