nuxt add

Source
Scaffold an entity into your Nuxt application.
Terminal
npx nuxt add <TEMPLATE> <NAME> [--cwd=<directory>] [--logLevel=<silent|info|verbose>] [--force]

Arguments

ArgumentDescription
TEMPLATESpecify which template to generate (options: <api|app|app-config|component|composable|error|layer|layout|middleware|module|page|plugin|server-middleware|server-plugin|server-route|server-util>)
NAMESpecify name of the generated file

Options

OptionDefaultDescription
--cwd=<directory>.Specify the working directory
--logLevel=<silent|info|verbose>Specify build-time log level
--forcefalseForce override file if it already exists

Modifiers:

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

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

nuxt add component

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

nuxt add composable

Terminal
# Generates `composables/foo.ts`
npx nuxt add composable foo

nuxt add layout

Terminal
# Generates `layouts/custom.vue`
npx nuxt add layout custom

nuxt add plugin

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

nuxt add page

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

nuxt add middleware

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

nuxt 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.
Terminal
# Generates `server/api/hello.ts`
npx nuxt add api hello

nuxt add layer

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