nuxt add-template
Scaffold an entity into your Nuxt application.
Terminal
npx nuxt add-template <TEMPLATE> <NAME> [--cwd=<directory>] [--logLevel=<silent|info|verbose>] [--force] [--mode=<client|server>] [--method=<connect|delete|get|head|options|patch|post|put|trace>] [--global] [--api] [--pages] [--client] [--server] [--connect] [--delete] [--get] [--head] [--options] [--post] [--put] [--trace] [--patch]
The add-template command scaffolds a file into the right directory for your project's structure. It replaces nuxt add <template> <name>, which still runs but is deprecated.
Arguments
| Argument | Description |
|---|---|
TEMPLATE=<api|app|app-config|component|composable|error|layer|layout|middleware|module|page|plugin|server-middleware|server-plugin|server-route|server-util> | Specify which template to generate |
NAME | Specify name of the generated file |
Options
| Option | Default | Description |
|---|---|---|
--cwd=<directory> | . | Specify the root directory of your Nuxt project |
--logLevel=<silent|info|verbose> | Specify build-time log level | |
--force | false | Overwrite the file if it already exists |
--mode=<client|server> | Add a client or server suffix to a component or plugin | |
--method=<connect|delete|get|head|options|patch|post|put|trace> | Add an HTTP method suffix to an API route | |
--global | Create global route middleware | |
--api | Create a server route in the API directory | |
--pages | Include NuxtPage and NuxtLayout in the app template | |
--client | Shorthand for --mode client | |
--server | Shorthand for --mode server | |
--connect | Shorthand for --method connect | |
--delete | Shorthand for --method delete | |
--get | Shorthand for --method get | |
--head | Shorthand for --method head | |
--options | Shorthand for --method options | |
--post | Shorthand for --method post | |
--put | Shorthand for --method put | |
--trace | Shorthand for --method trace | |
--patch | Shorthand for --method patch |
Modifiers:
Some templates take an extra flag that adds a suffix (like .client or .get) to the generated file name. Each value --mode and --method accept is also a flag of its own, so --mode client and --client do the same thing.
Files are written relative to your srcDir, which defaults to app/, and server files relative to your serverDir. The paths below assume those defaults.
Terminal
# Generates `app/plugins/sockets.client.ts`
npx nuxt add-template plugin sockets --mode client
nuxt add-template component
- Modifier flags:
--mode, or--client/--server
Terminal
# Generates `app/components/TheHeader.vue`
npx nuxt add-template component TheHeader
nuxt add-template composable
Terminal
# Generates `app/composables/foo.ts`
npx nuxt add-template composable foo
nuxt add-template layout
Terminal
# Generates `app/layouts/custom.vue`
npx nuxt add-template layout custom
nuxt add-template plugin
- Modifier flags:
--mode, or--client/--server
Terminal
# Generates `app/plugins/analytics.ts`
npx nuxt add-template plugin analytics
nuxt add-template page
Terminal
# Generates `app/pages/about.vue`
npx nuxt add-template page about
Terminal
# Generates `app/pages/category/[id].vue`
npx nuxt add-template page "category/[id]"
nuxt add-template middleware
- Modifier flags:
--global
Terminal
# Generates `app/middleware/auth.ts`
npx nuxt add-template middleware auth
nuxt add-template api
- Modifier flags:
--method, or the method as a flag of its own (--get,--post, and so on)
Terminal
# Generates `server/api/hello.ts`
npx nuxt add-template api hello
nuxt add-template server-route
- Modifier flags:
--apito write the route underserver/apiinstead ofserver/routes
Terminal
# Generates `server/routes/webhook.ts`
npx nuxt add-template server-route webhook
nuxt add-template layer
Terminal
# Generates `layers/subscribe/nuxt.config.ts`
npx nuxt add-template layer subscribe
A name that would resolve outside the project is refused, so pass a path relative to the project without leading slashes or
.. segments.