dc67660fec
- Update artifact generator schemas: - Clarify `path` is the artifact file path relative to the current working directory - Clarify `name` is the artifact symbol name - Remove prompt for `name` and remove it from the important options (won't be displayed by default in Nx Console generation UI, it will be part of the collapsed options) given that most of the time, it's meant to match the filename (last segment of the `path`) - Remove some leftover options related to the name and path formats that were previously missed - Fix an issue with NestJS generators - Fix an issue with Next `page` generator <!-- Please make sure you have read the submission guidelines before posting an PR --> <!-- https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr --> <!-- Please make sure that your commit message follows our format --> <!-- Example: `fix(nx): must begin with lowercase` --> <!-- 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 #
91 lines
2.3 KiB
Markdown
91 lines
2.3 KiB
Markdown
---
|
|
title: Nuxt application generator examples
|
|
description: This page contains examples for the @nx/nuxt:app generator.
|
|
---
|
|
|
|
Your 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:
|
|
|
|
```text
|
|
my-nuxt-app
|
|
├── nuxt.config.ts
|
|
├── project.json
|
|
├── src
|
|
│ ├── app.vue
|
|
│ ├── assets
|
|
│ │ └── css
|
|
│ │ └── styles.css
|
|
│ ├── components
|
|
│ │ └── NxWelcome.vue
|
|
│ ├── pages
|
|
│ │ ├── about.vue
|
|
│ │ └── index.vue
|
|
│ ├── public
|
|
│ │ └── favicon.ico
|
|
│ └── server
|
|
│ ├── api
|
|
│ │ └── greet.ts
|
|
│ └── tsconfig.json
|
|
├── tsconfig.app.json
|
|
├── tsconfig.json
|
|
├── tsconfig.spec.json
|
|
└── vitest.config.ts
|
|
```
|
|
|
|
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
|
|
|
|
{% tabs %}
|
|
{% tab label="Create app in a nested directory" %}
|
|
|
|
```shell
|
|
nx g @nx/nuxt:app apps/nested/myapp
|
|
```
|
|
|
|
{% /tab %}
|
|
|
|
{% tab label="Create app with vitest configured" %}
|
|
|
|
```shell
|
|
nx g @nx/nuxt:app apps/nested/myapp --unitTestRunner=vitest
|
|
```
|
|
|
|
{% /tab %}
|
|
|
|
{% tab label="Use plain JavaScript (not TypeScript)" %}
|
|
|
|
```shell
|
|
nx g @nx/nuxt:app apps/myapp --js
|
|
```
|
|
|
|
{% /tab %}
|
|
{% /tabs %}
|
|
|
|
## Generate pages and components
|
|
|
|
You 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:
|
|
|
|
{% tabs %}
|
|
{% tab label="New page" %}
|
|
|
|
```shell
|
|
nx g @nx/nuxt:component my-app/src/pages/my-page
|
|
```
|
|
|
|
{% /tab %}
|
|
|
|
{% tab label="New component" %}
|
|
|
|
```shell
|
|
nx g @nx/nuxt:component my-app/src/components/my-cmp
|
|
```
|
|
|
|
{% /tab %}
|
|
{% /tabs %}
|