Nuxt application generator examples

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

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

Create app in a nested directory

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

Create app with vitest configured

nx g @nx/nuxt:app apps/nested/myapp --unitTestRunner=vitest

Use plain JavaScript (not TypeScript)

nx g @nx/nuxt:app apps/myapp --js

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:

New page

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

New component

nx g @nx/nuxt:component my-app/src/components/my-cmp