nuxt add-template

Source
Scaffold an entity into your Nuxt application.
Terminal
npx nuxt add-template <TEMPLATE> <NAME> [--cwd=<directory>] [--logLevel=<silent|info|verbose>] [--force]
nuxt add <TEMPLATE> <NAME> still works but is deprecated in favour of nuxt add-template.
Read more about nuxt add, which adds Nuxt modules to your application.

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.

Generated files are written relative to your srcDir, which defaults to the root of your project. The paths below assume that default.

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

nuxt add-template component

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

nuxt add-template composable

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

nuxt add-template layout

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

nuxt add-template plugin

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

nuxt add-template page

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

nuxt add-template middleware

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

nuxt add-template 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-template api hello

nuxt add-template layer

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