wehub-resource-sync
2.1 KiB
2.1 KiB
title, description
| 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) undercomponents - A
greetAPI 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 thenuxt-pagecomponent 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