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

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

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.

npx nuxi add component TheHeader

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

<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:

npx nuxi add component base/Button

Nuxt Add Layout

Generating a layout is equally simple:

npx nuxi add layout HomePage

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

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

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

<style scoped></style>

Nuxt Add Page

Generating a page is equally simple:

npx nuxi add page about

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

<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:

npx nuxi add page "post/[id]"

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

npx nuxi add page services/web/design

Nuxt Add Composable

Generating a composable is equally simple:

npx nuxi add composable foo

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

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

Nuxt Add Plugin

Generating a plugin is equally simple:

npx nuxi add plugin for

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

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

Nuxt Add Middleware

Generating middleware is equally simple:

npx nuxi add middleware for

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

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

Nuxt Add Api

Generating a layout is equally simple:

npx nuxi add api base

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

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

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 👍

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

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.

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

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 👍. 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? It's entirely for free. 👍💰🎉🥳🔥