# Mastering Nuxt CLI: An Essential Tool for Accelerating Nuxt.js Development

Ramp up your Nuxt.js development efficiency with the Nuxt CLI, a highly versatile tool that's often overlooked in the Nuxt ecosystem. In this blog post, you'll learn how you can use the CLI to generate components, layouts, pages, compostables, and more.

Additionally, we'll share an effective startup script to jump-start your project after the initial Nuxt installation.

*Originally published on:* [*ByRayRay.dev*](https://byrayray.dev/posts/2023-06-28-nuxt-cli-the-tool-for-speeding-up-nuxt-development)

![divider-byrayray.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629890886208/NhHYvPmBA.png align="left")

## TLDR;

* `npx nuxi add component TheHeader`
    
* `npx nuxi add layout HomePage`
    
* `npx nuxi add page HomePage`
    
* `npx nuxi add composable foo`
    
* `npx nuxi add plugin foo`
    
* `npx nuxi add middleware foo`
    
* `npx nuxi add api base`
    

![divider-byrayray.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629890886208/NhHYvPmBA.png align="left")

## Nuxt CLI

The Nuxt CLI is one of the most underrated tools of the entire Nuxt ecosystem. Especially the part where you can generate components, layouts, pages, compostables, and more. No more manual work on creating these files; just run the command. In the examples below, I'll show you how it works.

### Nuxt Add Component

We all know the modern JavaScript framework is built by components, so let's start with that. Let's run the CLI and see the result.

```bash
npx nuxi add component TheHeader
```

This command creates the `components/TheHeader.vue` with this content.

```HTML
<script lang="ts" setup></script>

<template>
  <div>
    Component: TheHeader
  </div>
</template>

<style scoped></style>
```

If you want the component file nested in a folder, then use it like this example:

```bash
npx nuxi add component base/Button
```

![divider-byrayray.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629890886208/NhHYvPmBA.png align="left")

### Nuxt Add Layout

Generating a layout is equally simple:

```bash
npx nuxi add layout HomePage
```

This command creates a layout in the layouts folder with this content.

```HTML
<script lang="ts" setup></script>

<template>
  <div>
    Layout: HomePage
    <slot />
  </div>
</template>

<style scoped></style>
```

![divider-byrayray.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629890886208/NhHYvPmBA.png align="left")

### Nuxt Add Page

Generating a page is equally simple:

```bash
npx nuxi add page about
```

This command creates a page in the pages folder with this content.

```HTML
<script lang="ts" setup></script>

<template>
  <div>
    Page: about
  </div>
</template>

<style scoped></style>
```

If you want to create a child page or a page based on a specific ID, use this command:

```bash
npx nuxi add page "post/[id]"
```

Or if you need a route like `/services/web/design.`

```bash
npx nuxi add page services/web/design
```

![divider-byrayray.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629890886208/NhHYvPmBA.png align="left")

### Nuxt Add Composable

Generating a composable is equally simple:

```bash
npx nuxi add composable foo
```

This command creates a composable in the composables folder with this content.

```js
export const useFoo = () => {
  return ref()
}
```

![divider-byrayray.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629890886208/NhHYvPmBA.png align="left")

### Nuxt Add Plugin

Generating a plugin is equally simple:

```bash
npx nuxi add plugin for
```

This command creates a layout in the layouts folder with this content.

```js
export default defineNuxtPlugin((nuxtApp) => {})
```

![divider-byrayray.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629890886208/NhHYvPmBA.png align="left")

### Nuxt Add Middleware

Generating middleware is equally simple:

```bash
npx nuxi add middleware for
```

This command creates a middleware file in the middleware folder with this content.

```js
export default defineNuxtRouteMiddleware((to, from) => {})
```

![divider-byrayray.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629890886208/NhHYvPmBA.png align="left")

### Nuxt Add Api

Generating a layout is equally simple:

```bash
npx nuxi add api base
```

This command creates an API file with this content in the server/app folder.

```js
export default defineEventHandler((event) => {
  return 'Hello base'
})
```

![divider-byrayray.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629890886208/NhHYvPmBA.png align="left")

### Nuxt Startup Script

I often find myself creating the same files over and over again when I start a new Nuxt project. In this case, I created a shell script for myself which contains all the default files I use most of the time.

I call this file (or you can drop this command in your terminal and run it) in my terminal and have all the defaults created automatically.

Adjust this script for your own needs 👍

```bash
git init &&
npx nuxi add layout default &&
npx nuxi add layout HomePage &&
npx nuxi add component TheHeader &&
npx nuxi add component TheFooter &&
npx nuxi add api base &&
npx nuxi add page index &&
rm -of app.vue
```

![divider-byrayray.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629890886208/NhHYvPmBA.png align="left")

## Thanks

Now you are entirely up to date with how to use Nuxt CLI. I hope you can start using them right away. If you want to learn more of the Nuxt CLI, check [their awesome documentation](https://nuxt.com/docs/api/commands/add).

![hashnode-footer.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629789655319/nBF6anHH4w.png align="left")

*After reading this story, I hope you learned something new or are inspired to create something new! 🤗 If I left you with questions or something to say as a response, scroll down and type me a message, send me a* [*DM on Twitter @DevByRayRay*](https://twitter.com/@devbyrayray)

*Want to receive new posts in your mailbox? No, not only a link, just the whole article without any ads* 🤗 *or other stuff.* [***Then subscribe to my newsletter***](https://byrayraydev.substack.com/) *👍. I promise I won’t spam you, only the most important and best-quality content will be sent to you ✌️.*

> Did you know that you can create a [Developer blog like this one, yourself](https://hashnode.com/@devbyrayray/joinme)? It's entirely for free. 👍💰🎉🥳🔥