Nuxt 3 Modules and Open-Source

Hi, Vue JS Live, thank you for having me. And let's start with some numbers, shall we? So what do you think 2 million refers to? Well, I gave you that one, that's the number of downloads Nuxt.js had over the last 30 days. What can 16 million be, then? Well, you probably saw that one coming, that's the number of downloads Vue.js itself had over the last 30 days. So all right, Vue is 16 million, Nuxt is 2 million. What can 14 million be in that story? Must be something big. Well, turns out that's the number of downloads Nuxt.js modules all together had over the last 30 days. Interesting stat, huh? Well, this can only mean two things. First of all, like maybe one person installed 14 million modules over the last 30 days, or that on average, every Nuxt.js project uses 7 modules. Math cannot figure out which one is true. But, well, to me, this definitely means that Nuxt.js modules are a central part of Nuxt. And I'd like to talk to you about them today. So let's talk about Nuxt.js modules. We'll see what they are about, how you can make some, but also more importantly, why you'd like to make some. And finally, we'll see how they can help you to get involved and get started with open source thanks to Nuxt.js modules. So let's talk about that.

But, well, first of all, I'm Lucie Aberer, I'm from France, as you probably guessed from my accent. I started my developer journey working with MediaWiki, the software Wikipedia run on. But nowadays, I'm working at Prismic as a developer experience engineer. I'm having fun at Prismic managing its company, open source ecosystem, and Prismic is a CMS and page builder.

Finally, I'm a proud Nuxt contributor and core team member. I've been working with Nuxt for almost six years now, so you start to see the link with this talk. But anyway, enough with chatting, let's get to the talk.

And I want to try something a bit with this talk to make it interactive. Just a bit, don't worry. So I built this thing that works like a cart, except there's not music, but basically it allows me to prompt you about something. And the first thing I like to prompt you about is have you ever written a Nuxt module? So please grab your smartphone and scan one of the QR codes to submit your answer, alternatively you can just follow the links if you're on a laptop, and, well, let's see what it's about.

Well, that's, well, I'm not going to lie, that's what I expected. That's great, like most of us don't write Nuxt modules here, and that's perfectly fine. So let's talk about them, like what are Nuxt modules? And also, no worries, if you're new to Nuxt, and don't know what it is, I will make it beginner-friendly so everyone is able to follow along.

So Nuxt, as some of you might know, it's a meta framework for Vue.js, and from its documentations, Nuxt.js extensions which can extend its core functionality and have endless integrations. Pretty powerful, huh? But basically, what this means is that Nuxt modules are like add-ons to Nuxt. You can add them and update Nuxt with that. And concretely, this means that you can make, like, the first module to make your Nuxt website a PWA, up to, like, flashing connected lights in your room, if there's an error with your code, for example. I certainly did later. But well, and from a concrete approach, Nuxt modules are registered inside Nuxt config. So it can be a package name you have installed, a module, like, that you have locally, or just the module code directly. And you can provide options to module using this direct syntax or specific config keys you call by module. So, okay. That gives us a relative understanding of what Nuxt modules are about. But, well, let's just add some details to that.

So, first of all, as we've seen, there's, like, Nuxt module for everything. And talking about PWA earlier on, well, guess what? There's a Nuxt module for that. It takes care of all the gosha related to making that possible and is easy to set up. Another random example, you want to connect to your favorite CMS. You don't know what to do. Again, there's a module for that. It's maintained by a wonderful person. What more to ask? But, okay, sure, there are also a lot of other great CMS modules out there, including our storyblock friend over there. So you can go check out any of them. But you got my point. With Nuxt 3, you want to integrate with something, well, chances are that there is the next module for that. And you can go check out this website for the Nuxt.com modules for the most comprehensive list of modules available out there.

So, all right. Let's just now refocus on Nuxt modules. And I want to tell you something really important about Nuxt modules. It is that you can make your own.

Don't believe me? Well, I can prove that. Chances are that if you're working with Nuxt, you're a developer. It happens that developers do write code sometimes. And well, Nuxt modules are made just of that. And I don't know, but between you and me, I can see a pretty straight line from you to Nuxt modules.

So, you can make Nuxt modules. But, all right. More realistically, why would you want to make Nuxt modules of your own? Especially with so many modules already out there. Well, there are multiple reasons for that. First of all, as we've seen, Nuxt modules can do pretty much anything. And in that regard, they are an excellent way to abstract code from different projects and share it to your availability. This works great if you're an agency making websites for others or an enterprise managing different internal applications. I personally did so when I was working as a freelancer and I had some modules to manage meta headers, transform Nuxt in a particular way, or even output statistics throughout my project. And the great reason to make Nuxt modules of your own is to facilitate integration with the tool you use. Indeed, when there are modules out there for Tailwind or Sentry, try not to be one without a specific tool you use. In that case, why not create it? Maybe it's an internal tool, maybe it's something else. I don't know. And it doesn't need to be super fancy to get started.

So, all right. Sure. There are reasons to create Nuxt modules out there for everyone, but how do we do it? Well, that's what I'm about to show you. Let's learn how to create Nuxt free modules together. And we'll do that concretely. So, the best way to get started and to create a Nuxt free module is to use Nuxt3, Nuxt3 CLA. And with this command, we can bootstrap a Nuxt module, and then we just have to install dependencies with whatever package manager floats your boat and you're up and running. But because I don't have any trust in the Wi-Fi connection of this room, I already did that ahead of time right here. So, well, we launched Nuxt3. And we ended up with that project. So what does it look like? Well, let's take a minute to tour that project structure. First of all, we have a few directories.

We have the source directory, that is the source code of our module. We have some tests by default. We can forget about those for now. And we have a playground directory. This playground directory is just the next application configured with our module locally that we'll use to develop our module.

Then we have the package.json file here. So inside it, there's a few things interesting to note. First of all, it's already configured to be shipped properly to npm. You don't have to worry about that. Then if we look at the scripts, there's multiple of them. The prepack scripts takes care of building a module. And it's using this fancy next module build command. This is an in-house builder developed by NeXT on top of rollup and all the cool tools. And basically just making sure that your code is bundled correctly the way NeXT wants it to be bundled to be used properly within the next project. That's great. Because you don't have to go through the headache of configuring a bundler or learning one just to ship your module. Then we have multiple dev commands. Those are used to interact with our playground when developing a module. We'll make use of them later on. Finally, we have a ready script that is a default one we use on all the community modules at NeXT. It's just like a one script, launch it all, and deploy it to npm. But you can fine-tune it to your liking if you need to.

Regarding dependencies, well, we have NeXTKit installed. This is a collection of utilities provided by NeXT to develop modules. We'll make use of it later on. And finally, we have NeXTModuleBuilder, which is providing the build command we've seen before. Then on our project, we have multiple root files. You know most of them, I'm sure. You can fine-tune them to your liking. One thing, though, if you plan to share your module with the community, it's nice to stick with the defaults as this allows your module to share consistent coding style with the other community modules available out there.

Let's now focus on the SRC directory. Inside it, we have this module.ts file. This is our module entry point. And as you might have noticed, it's a TypeScript file. Indeed. With NextGit, TypeScript is the default for modules because it results in a much improved developer experience for end-users. But no worries. If you're not comfortable with TypeScript, you can still develop modules in plain JavaScript. But as this will get us a bit of traffic for today, we'll stick with that file. But everything will look like plain JavaScript. No worries about that.

If we now take inside it, as you see here, there's already some boilerplate code in it. Let's explain it. First of all, we're importing a few UTTs from NextGit, namely defined NextModule here. And we'll make use of them later on. Then we have an interface. It's a way to describe an object structure in TypeScript. But as promised, no TypeScript black magic today, so we can safely ignore it. And then we have our module export right here, which makes use of the defined NextModule helper provided by NextGit. And our module is the object right here.

So, well, let's explain the structure of this object. First of all, we have the meta property. This is a collection of metadata related to our module. So the name of our module, the config key we like to use, and say next config to resolve our module options. So if we check the Playground here, we can see we can write options for the myModule key. There can be other types of metadata, like the module compatibility, but we don't need to know about those for today. Then we have the defaults key property here. This is where you can provide default options for your module that will get resolved against the options provided by your users to your module. Indeed, you can say that your module needs options to run, and if you don't want users to provide all of them, you can set a default here. And finally, we have the setup function right here.

This is what the code that will get executed by next when loading our module. It's a function that can be asynchronous if need be, but it's recommended to keep it synchronous otherwise it can have some performance headache. It receives two arguments, the options the user provided match against the default options we defined here, and the next object we can use to interact with next. And here, we have some boilerplate code by default but we can safely get rid of it as we will come back later to it.

So, all right, that was a pretty dense section during our module anatomy, and well, this is really the most important thing to know about it. But just to recap what we learned. First of all, creating a module can be done with NextC in it. Modules come with new defaults and a bundler by Next. This is quite a new improvement since the developer experience of module. NextKit is a set of helpers to develop our module, and modules are tested by default, And finally, modules are defined using the new defined NextModule helper, also provided by NextKit.

So, as I said, just knowing the basic structure is already the most important part. But let's now try and do some few things with our module. Well, I'm a bit constrained with time today, so I only have time for one demo. So, I want to ask you, do you want me to show you how a module can provide stylesheets and helpers to your project, or do you want me to show you how a module can integrate with Next DevTools, which is this new tool that was released with Next earlier this year, that is pretty exciting. So, once again, please grab your phone and submit your vote, and well, I will do one of those two.

All right. Well, it's pretty even, but, well, we have like a majority for assets, so let's go with assets. And, maybe, in extra time, we'll try to do the next DevTools. We'll see. So, well, assets it is. And this is an interesting path to take, because it's maybe the most like straightforward way for you to provide to get value out of the modules you do. When we think about assets with a module, we think about the runtime directory, which is this directory, this right here that I ignored until now. Inside it you can provide any kind of assets you want the module to inject, whether it's a style sheet, a view component, composables, or even 3D modules, as we've seen before. It's treacherous. And, well, let's start and do something really basic to start with. We'll start by just, like, try to provide a style sheet. So, right now, my next application, it has a white background here. We'll create a style that's CSS-fine. We'll add some style to it. So, go, like, background.

No, not background. I'm sorry. Body. Background. Red. And now, once we have this style CSS-fine, how do I inject it with my module? Well, we'll go back to our module here, and we need to do two things to inject it. First of all, we need to create a resolver. So, to do so, we have already imported the create resolver helper from NeXTKit.

So we'll go const resolver equals create resolver. And we'll provide it with our module, like, the current path. So, import.meta.url, which looks a bit like dark magic, but basically, we're just creating a helper that helps us to resolve paths consistently within our file system. So, once we have this helper, we can just access NeXT.options.css, and we'll just push our ‑‑ we'll just push the path of our CSS file. So, we go resolver.resolve, and provide it with a path. So, we'll go inside runtime directory, and we want our CSS file.

So, now I can save that, go back to my terminal, give a restart to my NeXT server. And while NeXT is taking its time to restart on Windows, everything is still on Windows, we can notice here that to inject our CSS file, we just access NeXT options. Indeed, NeXT modules can read and update NeXT options, as they want, from NeXT config. So now, if we ‑‑ well, NeXT should be done restarting. We can now see we have our big flashy red background injected inside an application from our module. Great! So. So let's keep working with our module for a bit. And let's see how, for example, we can inject a plugin from it.

So NeXT plugins are a thing in NeXT that allows you to inject things inside your runtime application. So default module starter comes with one. I just added this, like, formatting utilities here for the demo purpose. And so how do I inject this module inside my application from my module? To do so, I need to do three things. First of all, I need to resolve my plugin path. So again, I use my resolver, and I go resolver.resolve. And we just check the path for our plugin. It's runtime for the plugin.".

We can get rid of this extension. And then we need to tell NeXT to transfer your plugin. So go nextOptions.build.transfer.push, and we push our plugin to it. And finally, we make use of the app plugin provider by NeXT Kit to tell NeXT that you need to load this plugin. So go app plugin, plugin, and now I can save all of that, give NeXT a restart. And again, while it's restarting, this time it should be faster because I'm a bit warmed up.

Inside my playground here, I just made a log. Like, if it's available at my module, then I just make a log of it. And I can go back here, inspect the code, and as soon as it's loaded, we shall see our code showing up. If NeXT is called, okay, here we go. You can see here, inside my console, I have the log of the formatting utilities we injected from our module. So okay. That's the interesting thing.

Let's do a third one. With NeXT, you might be, you might be like familiar with auto imports, like when you have components inside your imports directory, inside your components directory, they are auto imported, you don't need to import them. Well, modules too can provide auto imports. So I created this imports directory inside my runtime directory here, with a few utilities, I just lowered my zoom, something and something that predicts a bitcon value. So well, thank you for liking my silly jokes. So well, how do I add this, all those utilities to import some NeXT application? Well, to do so, I can just use the add imports dir utility, also provided by NeXTKit. To it, I just need to do the resolver.resolve once again to resolve a side path. And I just give it the runtime and forward slash import. And this will make everything into this folder auto import inside my NeXT application. So here, again, I can give my NeXT a quick restart. I can go check it with my app here. I will uncomment this line right here. So right now we see like, there's no like, type definition. Well, actually, here we go. We now have type definition from NeXT, because NeXT auto imported them for me, and created this type definition for me. And if we go back to our browser here, to the console, we'll see we have like the pong for the ping pong, the little remipsum, and the bigcon value for the next roundup. So all right.

So this was an example of what modules can do. Of course, we can do a lot more, like adding auto imports for composables, adding auto imports for components, interacting with Nitro, you can do really powerful things with that. Or also using NeXT lifecycle hooks and more. And many more. But don't fear of missing out. We documented plenty of use case on NeXT module documentation. And you'll be able to follow that.

So that's not all, folks. There's one last thing I need to talk to you about. That there are some extra perks to learning NeXT modules. The first one is that by learning NeXT modules, you'll get a deeper understanding of how NeXT works, its internals and behaviors. And this will allow you to troubleshoot issues you have with NeXT in a more easy way. And a related fun fact to that is that NeXT itself is partly made out of modules and rely on module APIs.

Another thing that by being familiar with NeXT module structure, this allows you to have a better understanding of the module you use. In that regard, feel free to go ahead and have a look at the source code of the module you use. For example, if you have a look at NeXT ColorMod module source code, we can see it's using this neat pattern of using a NeXT alias to inject its options inside NeXT Runtime. Well, that's how I learned a lot about NeXT really and you can do it too. Second thing, now that we're familiar with NeXT, how NeXT modules work and everything, this all empowers you to contribute to the ecosystem. You found a bug while using a module? You can fix it. You're craving for a feature on your favorite module? Go in a pen pool request. NeXT community is really friendly to newcomers and personally, that's how I became comfortable with open source and started my journey and you can do it too. And if you don't know where to get started, again, just head to next.com forward slash module for a comprehensive list of community modules available with NeXT free.

So, that was my talk, NeXT free modules and open source. I really hope you learned a few things about NeXT modules. There are a way to extend NeXT functionalities endlessly. You can make NeXT modules for your team, your company, or for the whole community. The next is structured with NeXT free and come with an improved developer experience, learning that structure gives you better understanding of NeXT and allows you to get involved in the community. We can find all the resources about this talk. Slide source code. Transcript and more at Lucy.red.

You can follow me on Twitter for more about NeXT and more of my nonsense. Thanks, everyone. Thanks a lot, Lucy. That was a really interesting talk. Feel free to go sit. And now let's dive deep into some questions.

The first one is. Just a second. All right. It's reloading, but since it's reloading, let me ask my question. Do you have some point when you decide, OK, now I need to create a next model? OK, yeah. Of course, we don't need to jump straight away and create a module for everything, because this would be overkill. As I said, module are great to abstract things. But it's like whenever you want to abstract things, you have to... Well, it's not coming for free. It has maintenance costs over it. So you have to ask yourself, well, is it worth it to abstract that? Well, if the answer is yes, then modules are an option for you to abstract this code and share it across multiple projects. Of course, if you're just a company, like I'm making just one e-commerce website, there might not be a lot of use case to creating modules because you're only working on one next project. But if you're working in a bigger company with like multiple next projects, or an agency making websites like on a daily basis for multiple clients, then there's an opportunity for you to create modules because you might end up using the same kind of code. Yeah, it totally makes sense, because otherwise you just spend time on abstracting all the logic and you actually don't gain anything from it.

Now we have some more questions. And the first one is, what's the weirdest Nuxt module you've ever seen? Well, I guess it's one of the modules I made. It's called Nuxt Hue. And basically, I don't know if you know, like at my place, I have some Philips Hue lightbulbs that are basically connected lights. I can make them blue, red, and everything. And basically, I created the module that when there's an error within my Nuxt application, it flashes those lights within my room in red, of course. And wow, when I develop Nuxt, it can do that. That was pretty fun to develop, and pretty useless also. That sounds fun.

That sounds fun. The second one is, what is your favorite module you've created or contributed to? Wow, of course it's Nuxt Prismic module. It's a great module you can use to integrate with Prismic or CMS. It's really fake.

Okay, kind of expected answer. Next one is, how much do you worry about Nuxt introducing changes that will break models? Inside Nuxt Core team, we really value a lot the module ecosystem, because that's what allowed Nuxt to integrate so well with so many technologies. We follow the same there, and we really try our best to not introduce breakage for modulators and things that will break the module, because this will eventually hurt the whole ecosystem. I know there has been a bumpy road to update from Nuxt 2 to Nuxt 3 and we're still working on that to make the upgrade path easier for everyone. I think Daniel will talk about that later on today. We take that seriously, and we try to not make maintaining modules an asshole for everyone.

And in practice, how often does that happen, that you have some breaking changes you need to deal with? Well Nuxt 3 was obviously a big breaking change because it was introducing Nuxt 3 support and also revamping everything from the core. Moving forward, we'll have more new major release at a faster pace, like within 1-2 years perhaps, but those will be more minor breaking changes and we'll have some automated way to make the update for you.

Ok, thanks. The next one is, if already using a framework, such as Quasar, at what point does it make sense to switch to Nuxt? Well, actually I'm not familiar with Quasar so I'm not sure I can give a straight answer to that. Ok, sorry. No worries, then let's move to the next one. Oh, you hyped people to create Nuxt modules, because the next question is what Nuxt module do you believe is missing to create? Well, with Nuxt, Nuxt took for many years and so we had a really, really vast module ecosystem with plenty of modules, but most of them were really great. With Nuxt, the ecosystem is still more tiny today so there might be tools that we have like a Nuxt 2 module for it that we don't yet have a Nuxt 3 module for it. In that case, if you notice one of them, I know we're working on the off module right now. So you're free to join the effort and I create that module and I can migrate it to Nuxt 3 so that everyone is able to take advantage of it again.

Okay, now you got some ideas. The next one, is Nuxt compatible with Vue 2? Well, Nuxt 2 is compatible with Vue 2. Nuxt 3 is compatible with Vue 3. And, well, we don't plan to make Nuxt 3 compatible with Vue 2 for various reasons, which I'm happy to discuss with you if that's your issue. Makes sense, totally. Next one. Do you think Vue should have a module system like Nuxt? Well, Vue kind of has already a module system which is called a plugin system that allows you to integrate with Vue and create integration with it. For example, the Prismic module we provide to Nuxt is actually just mainly injecting a Vue plugin. We have that integrates Prismic with Vue and it's doing that under the hood along with some other Nuxt customizations. So if you want to create integration with Vue, then you have to check out Vue plugins I guess or if you're thinking about build time integration then maybe you want to have a look at Vid plugins.

Ok, thanks for that. The next one is, does runtime directory have a special meaning in this example? The runtime directory is more of a convention, however with the nuxt module builder command we have, it applies some specific configuration to this runtime directory so it does some like transpilation of everything that's in it when building your module and so, well, you kind of have to stick with it for that reason and well, it may be configurable, but I won't talk more about that. Just a convention.

Thank you, and a lot of questions but this is a final one. All kinds of modules are posted on the website nux.com slash modules or they need to pass something like a code quality check? Not really. Basically like if you create a module to integrate with a tool because there's not one yet and you want to make it a community module, you just have to reach out to us and we'll help you like, make that module an official community module. To do so, you just have to open a ticket or like an issue on GitHub, on the nux module GitHub, explain what you want to achieve and we'll help you when I get there and like, make it like a nux community module if you want to share it with the broader community.

Okay, makes sense. But if you don't know how to get started already, you can create nux modules by just prefixing your module with nux-npm and well we recognize those modules as community modules even if they're not under the nux-js organization npm. Makes sense. Our people here just want to break things, so they're afraid. Nice. Thanks a lot Lucy for this interesting talk. You're welcome. That's all from the questions.