nx/packages/nuxt/docs/application-examples.md

title	description
Nuxt application generator examples	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 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

{% tabs %} {% tab label="Create app in a directory" %}

{% callout type="note" title="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. {% /callout %}

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

{% /tab %}

{% tab label="Create app with vitest configured" %}

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

{% /tab %}

{% tab label="Use plain JavaScript (not TypeScript)" %}

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

{% /tab %} {% /tabs %}

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:

{% tabs %} {% tab label="New page" %}

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

{% /tab %}

{% tab label="New component" %}

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

{% /tab %} {% /tabs %}