How Nuxi helps Nuxt deliver great DX?

The first time I heard about Nuxt 3 and their new CLI tool called nuxi I knew that I would like to use it in my next Nuxt app. The experience was so good that I started using it for my project, modules, debugging and many more. But then, I thought that it is missing something that I was using quite a lot in my backend projects when using Nest.js -> A CLI command to generate templates for controllers, services, modules, and more.

So, I decided to contribute to Nuxt framework with this functionality and you can read more about it here https://dev.to/vue-storefront/how-our-team-member-jakub-helped-improve-the-dx-of-new-nuxt-3-cli-1efo

Today however, I would like to talk about another very useful nuxi feature that is related to Nuxt modules that improves developer experience of using it by a mile.

Enjoy!

🤔 What is nuxi?

Nuxi is a Command Line Interface tool built specifically for Nuxt. It allows to generate a new project for Nuxt app or a module (or basically any template), create new blocks like components, pages, endpoints, and many more!

You can create a new project by utilizing following command:

npx nuxi@latest init <project-name>

This will scaffold a new Nuxt project ready for you to try it out. Let's take a look at other nuxi command that helps achieve great Developer Experience.

🟢 Using nuxi module add in Nuxt app

Usually when installing a new Nuxt module, you would do four to four steps:

1. Install the package with npm / yarn / pnpm
2. Add module to modules array in nuxt.config.ts file
3. Optional Add module configuration
4. Optional Use the component or composable in your app

The command nuxi module add <MODULE_NAME> allows you to skip the second step in the list. So for modules like Nuxt Security right now, you only need to run the first step and nuxi will automatically register the module so that you can get started with the module right away.

This may not sound that great at first but if you think that by using nuxi we are able to reduce the amount of steps by 50% this sounds great!

So, we get the same result with less time and steps This is what I call great Developer Experience!

You can read more about this method here
https://nuxt.com/docs/api/commands/module

📖 Learn more

If you would like to learn more about Vue, Nuxt, JavaScript or other useful technologies, checkout VueSchool by clicking this link or by clicking the image below:

It covers most important concepts while building modern Vue or Nuxt applications that can help you in your daily work or side projects 😉

✅ Summary

Well done! You have just learned how to utilize nuxi in your Nuxt app.

Take care and see you next time!

And happy coding as always 🖥️