Nuxt/docs/3.api/4.commands/add.md
2025-01-07 05:43:50 +00:00

2.4 KiB

title description links
nuxi add Scaffold an entity into your Nuxt application.
label icon to size
Source i-simple-icons-github https://github.com/nuxt/cli/blob/main/src/commands/add.ts xs
npx nuxi add <TEMPLATE> <NAME> [--cwd=<directory>] [--logLevel=<silent|info|verbose>] [--force]

Arguments

Argument Description
TEMPLATE Specify which template to generate (options: <api|plugin|component|composable|middleware|layout|page|layer>)
NAME Specify name of the generated file

Options

Option Default Description
--cwd=<directory> . Specify the working directory
--logLevel=<silent|info|verbose> Specify build-time log level
--force false Force override file if it already exists

Modifiers:

Some templates support additional modifier flags to add a suffix (like .client or .get) to their name.

# Generates `/plugins/sockets.client.ts`
npx nuxi add plugin sockets --client

nuxi add component

  • Modifier flags: --mode client|server or --client or --server
# Generates `components/TheHeader.vue`
npx nuxi add component TheHeader

nuxi add composable

# Generates `composables/foo.ts`
npx nuxi add composable foo

nuxi add layout

# Generates `layouts/custom.vue`
npx nuxi add layout custom

nuxi add plugin

  • Modifier flags: --mode client|server or --clientor --server
# Generates `plugins/analytics.ts`
npx nuxi add plugin analytics

nuxi add page

# Generates `pages/about.vue`
npx nuxi add page about
# Generates `pages/category/[id].vue`
npx nuxi add page "category/[id]"

nuxi add middleware

  • Modifier flags: --global
# Generates `middleware/auth.ts`
npx nuxi add middleware auth

nuxi add api

  • Modifier flags: --method (can accept connect, delete, get, head, options, patch, post, put or trace) or alternatively you can directly use --get, --post, etc.
# Generates `server/api/hello.ts`
npx nuxi add api hello

nuxi add layer

# Generates `layers/subscribe/nuxt.config.ts`
npx nuxi add layer subscribe