In this lesson, we're jumping straight into the modules ecosystem that makes Nuxt community super powerful. Hold tight, because it's about to get interesting. There are four types of Nuxt modules. Official modules, community modules, third-party and other community modules, and finally, private or personal modules.
We'll start with official modules. And those are the rock stars of the Nuxt world. They are developed and maintained by the core team, and they are constantly improved by contributions from the community. Think of them as the gold standard, offering the highest level of quality and compatibility.
I find myself reviewing their source code in a lot of occasions just to improve my implementation. Need content management? Nuxt Content is the one you're looking for. Or if you need fancy image processing, go for Nuxt Image.
UI provides essential components and styles out of the box. And if you haven't noticed, all efficient modules are prefixed with at Nuxt, and each one of them deserves its own course to cover all the features and benefits. If you're interested in learning more about a specific one, just let us know in the comments. And now, let me show you something cool.
com. And here, you can claim your Nuxtor tag if you have made any contributions to Nuxt modules or official repositories for Nuxt, and this Nuxtr tag will be available for you on the Nuxt Discord server, so if any of those requirements applies to you, just connect to GitHub and claim your Nuxtr batch. And now, community modules, and this is where things get truly wild. The talented Nuxt community has crafted an incredible array of modules, and unlike official modules, they are prefixed with add-nuxt-js, not just add-nuxt-like official modules.
medule epic page So in case you didn't find what you're looking for in the official modules or the community modules, you would definitely want to have a look at the third-party modules. They are actually full of hidden gems. They are like beta versions of community modules. They are still being tested and improved, but anyone can still try them out.
If a third-party module becomes popular and works well, its author can promote it to be listed as an official community module, just like we saw earlier. Buy the book and according to the official documentation, they should be prefixed with Nuxt Dash. Just like this one over here, the Nuxt icon module starts with Nuxt Dash. But not all third-party modules authors or even community modules authors sticks with the naming convention, so keep that in mind while you're scrapping for those ones.
There are occasions when you find yourself crafting a module tailored specifically for your project's unique needs. This is when you should go for a private module, which is designed for personal use or within teams. These modules provide a means to encapsulate custom functionality and collaborate within a closed environment. And they don't have to be published as an npm public package if they are only needed for a single project.
You can just use the modules directory inside your Nuxt project and Nuxt will automatically recognize them and register them for you. So all developers can just pick and choose from a vast ecosystem. We can grab and install any module we like using npm, yarn, pnpm, or whatever the instructions are telling us. And usually things are quite easy.
Let's take Nuxt Content as an example. In the Get Started guide, we find multiple ways to work with the module. The first one is an online playground, the second one is creating a whole new project with Nuxt Content inside, and the third one is adding it to a current project. I'm gonna go with this option.
So since I'm using yarn, I'll copy the yarn command, and paste it to VS Code terminal. And while it's doing its magic, let's check what's next. ts. So let's do that.
Over here. And then what? md. And then any content inside it.
So let's create a new directory called content. v, we need to add nuxt-page. Makes sense, just to make things work in pages directory. So here, instead of nuxt-welcome, we will replace it with nuxt-page.
Time for the truth, yarn dev, and let's see if that worked. It works! Smooth sailing, wasn't it? But hold on, the excitement doesn't stop here.
Let's open up Nuxt's div tools, which is this cute little icon at the bottom of the page. where we will find a tiny box icon on the left side representing modules. Click on it. It will show you the modules you currently have installed in your project.
And we see here Nuxt MDC module, which is a dependency inside Nuxt Content. And then of course we see Nuxt Content module. Now, when you click install new module, you will see a list of all available Nuxt modules at your fingertips waiting to be explored. Finding the perfect module is like picking candy from a virtual store.
It reminds me of the plugins page in WordPress dashboard, but definitely 100% much cooler. I don't even know why did I make this comparison. No offense to WordPress fans of course. Anyway, just click on anyone you want to install, Pina for example, head back to the terminal, copy this token over here, and press this.
And now you can install any module just like that. Install, and wait for it, and voila, you got Pina added. to your project without doing anything at all. What truly makes Nuxt the Nuxt we know is the extraordinary community of Nuxt enthusiasts, just like you and me.
The journey of crafting Nuxt modules is not a personal exploration, it's a collective effort that shapes the Nuxt we all use and love. In this course, your journey in learning how to create Nuxt modules is not just about personal use, it's about being part of something bigger. So let's not just absorb the knowledge, but also contribute back to the ecosystem. Whether it's sharing your creations, providing feedback, or offering even the tiniest support, your active involvement fuels the collaborative spirit that makes Nuxt special.
That's it for this lesson and the whole chapter. In the next one, we will dive into the code and gear you up to become a Nuxt author.