Mastering Nuxt CLI: An Essential Tool for Accelerating Nuxt.js Development
Works just like the Angular CLI, but than for Nuxt πͺ
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. ππ°ππ₯³π₯