Nuxt 3 Modules and Open-Source

Rate this content

Nuxt modules are the de-facto way of extending our Nuxt applications with new behaviors and functionalities. Have you ever built your own? Why would you bother with hundreds of modules already out there? Let's answer those questions together and see why making your own modules in Nuxt 3 can both help you have a deeper understanding of how Nuxt works while also paving the way for you to get into open source!

31 min
12 May, 2023


Sign in or register to post your comment.

AI Generated Video Summary

Nuxt.js modules are a central part of Nuxt and have had 14 million downloads. Creating Nuxt modules is easy with Nuxt 3. Modules can provide assets, CSS injection, plugins, and auto imports. Learning Nuxt modules gives a deeper understanding of Nuxt and extends its functionalities. The Nuxt community is friendly to newcomers and encourages module creation.

1. Introduction to Nuxt.js Modules

Short description:

Let's start with some numbers. Nuxt.js had 2 million downloads in the last 30 days, while Vue.js had 16 million. Nuxt.js modules had a total of 14 million downloads. Nuxt.js modules are a central part of Nuxt and I will talk about them today.

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.

2. Introduction and Interactive Element

Short description:

I'm Lucie Aberer, a developer experience engineer at Prismic. I'm also a proud Nuxt contributor and core team member. In this talk, I want to make it interactive by prompting you about writing Nuxt modules. Let's see if you've ever written one!

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.

3. Introduction to Nuxt Modules

Short description:

Nuxt modules are like add-ons to Nuxt. They can extend Nuxt's core functionality and have endless integrations. You can make your own modules or use existing ones for various purposes, such as creating a PWA or connecting to a CMS. With Nuxt 3, there is likely a module available for any integration you need. Check out the modules website for a comprehensive list.

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

4. Creating Nuxt Modules

Short description:

Nuxt modules are an excellent way to abstract code from different projects and share it. They facilitate integration with the tools you use. Creating a Nuxt module is easy with Nuxt3. Just bootstrap a Nuxt module, install dependencies, and you're up and running. Let's take a minute to tour the project structure.

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.

5. Module Development Setup

Short description:

We have the source directory, tests, and a playground directory for local development. The package.json file is preconfigured for npm shipping. There are multiple scripts, including prepack for building modules and dev commands for interacting with the playground. A ready script is available for deploying to npm. Dependencies include NeXTKit and NeXTModuleBuilder. Stick with default root files when sharing with the community.

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.

6. Exploring the Module Structure

Short description:

Let's focus on the SRC directory. Inside, we have the module.ts file, which serves as the module entry point. It's a TypeScript file, but you can still develop modules in plain JavaScript. The module export utilizes the defined NextModule helper and consists of the meta property, which contains metadata about the module, the defaults property for providing default options, and the setup function.

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.

7. Module Code Execution and Assets

Short description:

The code executed by next when loading our module is a function that can be asynchronous. Creating a module can be done with NextC in it. Modules come with new defaults and a bundler by Next. NextKit is a set of helpers to develop our module. Modules are defined using the new defined NextModule helper. Let's focus on assets, which is the most straightforward way to provide value with modules. The runtime directory is where you can inject assets like stylesheets, view components, and more.

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.

8. Injecting CSS and Plugins

Short description:

To inject our CSS file, we access NeXT options and push the path of our CSS file. After restarting NeXT, we can see the big flashy red background injected inside an application from our module. NeXT plugins allow you to inject things inside your runtime application. To inject a module, we need to resolve the plugin path and check the path for our plugin.

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.".

9. Module Plugin Transfer and Auto Imports

Short description:

We can get rid of this extension. We tell NeXT to transfer the plugin using We use the app plugin provider by NeXT Kit to load the plugin. Inside the playground, we make a log of the module's availability. The formatting utilities injected from our module can be seen in the console. Modules can provide auto imports by using the add imports dir utility. The utilities in the imports directory are auto imported into the NeXT application. NeXT auto imports the type definitions, and they can be accessed in the browser console.

We can get rid of this extension. And then we need to tell NeXT to transfer your plugin. So go, 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.

10. Perks of Learning NeXT Modules

Short description:

Modules can do a lot more, like adding auto imports for composables, components, interacting with Nitro, and using NeXT lifecycle hooks. Learning NeXT modules gives a deeper understanding of how NeXT works and allows troubleshooting. NeXT itself is partly made out of modules. Familiarity with module structure helps understand and contribute to the ecosystem. NeXT community is friendly to newcomers. NeXT modules extend NeXT functionalities and improve developer experience. Get involved and find resources at

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


Questions and Weird Nuxt Module

Short description:

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. Do you have some point when you decide, OK, now I need to create a next model? Of course, we don't need to jump straight away and create a module for everything, because this would be overkill. Modules are great to abstract things. But you have to ask yourself, is it worth it to abstract that? If the answer is yes, then modules are an option for you to abstract this code and share it across multiple projects. If you're working in a bigger company with multiple next projects, or an agency making websites for multiple clients, then there's an opportunity for you to create modules. Otherwise, you just spend time on abstracting all the logic and you actually don't gain anything from it. What's the weirdest Nuxt module you've ever seen? It's called Nuxt Hue, and it flashes Philips Hue lightbulbs in red when there's an error in my Nuxt application. It was pretty fun to develop, and pretty useless also.

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.

Nuxt Modules and Compatibility

Short description:

The speaker's favorite module is the Nuxt Prismic module, which integrates with Prismic or CMS. The Nuxt Core team values the module ecosystem and tries to avoid introducing breaking changes. Nuxt 3 was a major breaking change, but future releases will have minor breaking changes with automated updates. The speaker is not familiar with when it makes sense to switch from another framework to Nuxt. They encourage people to create Nuxt modules and mention that some tools may not have Nuxt 3 modules yet. Nuxt is compatible with Vue 2 in Nuxt 2 and Vue 3 in Nuxt 3. The speaker explains that Vue already has a plugin system for integration, and the Prismic module injects a Vue plugin along with other Nuxt customizations.

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.

Runtime Directory and Creating Community Modules

Short description:

The runtime directory is a convention in Nuxt modules, and it undergoes specific configuration during module building. Creating community modules is easy by reaching out to the Nuxt team through GitHub. Modules can be recognized as community modules even if they are not under the Nuxt-js organization on npm.

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

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

TypeScript Congress 2023TypeScript Congress 2023
31 min
Making Magic: Building a TypeScript-First Framework
I'll dive into the internals of Nuxt to describe how we've built a TypeScript-first framework that is deeply integrated with the user's IDE and type checking setup to offer end-to-end full-stack type safety, hints for layouts, middleware and more, typed runtime configuration options and even typed routing. Plus, I'll highlight what I'm most excited about doing in the days to come and how TypeScript makes that possible not just for us but for any library author.
React Advanced Conference 2022React Advanced Conference 2022
16 min
How to Build Your Own Open Source Project
We all used open source projects every day such as npm packages, editors, web applications, and even operating systems... Have you ever thought of building one of your own? In this talk, I will share my journey building jest-preview, from when it was just a vague idea, to currently a well-adopted library to help frontend engineers write tests faster. I will share with you how to come up with an idea for a project to work on, what is the struggles you have to overcome as an author of an open source project, how to manage time efficiently, and how you get attention from engineers around the world.
TypeScript Congress 2022TypeScript Congress 2022
30 min
Lessons from Maintaining TypeScript Libraries
Maintaining widely-used JS libraries is already complicated, and TypeScript adds an additional set of challenges.
Join Redux maintainer Mark Erikson for a look at some of the unique problems TS library maintainers face, and how the Redux team has handled those problems. We'll cover:
- Tradeoffs of different ways to define TS types for a library
- How to target different versions of TS, and considerations for determining the supported version range
- Migrating existing JS libraries to TS
- Differences between writing "app" types and "library" types
- Managing and versioning public types APIs
- Tips and tricks used by types from the Redux libraries
- TS limitations and possible language-level improvements
JSNation 2022JSNation 2022
26 min
How JS Modules work: a Browser Perspective
Modules are a popular tool for JavaScript Developers. Recently, there have been a number of proposals touching on how Modules work, including Import Maps, Top level await, JSON modules, Module asserts, and many others. But how does the module loading system work, and how do these proposals augment it? What does it look like from the browsers perspective to load a module tree with an import map? We will explore these questions and more, giving you a behind the scenes look at module loading in JS.
Vue.js London 2023Vue.js London 2023
31 min
Image Optimization - Quick Win for Improving Performance in Vue & Nuxt Apps
Improving Performance of Vue or Nuxt apps is not an easy task. However, there are some quick wins that you can implement easily that will drastically improve the performance of your website. One of such quick win is Image Optimization. In this talk, I will teach you how to optimize images on the fly with Digital Asset Managements services like Cloudinary or Content Management Systems, utilize the concept of Lazy Loading, use compressed format of images like WEBP, and many more!

Workshops on related topic

Vue.js London Live 2021Vue.js London Live 2021
117 min
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
We'll build a Nuxt project together from scratch using Nitro, the new Nuxt rendering engine, and Nuxt Bridge. We'll explore some of the ways that you can use and deploy Nitro, whilst building a application together with some of the real-world constraints you'd face when deploying an app for your enterprise. Along the way, fire your questions at me and I'll do my best to answer them.

JSNation 2022JSNation 2022
141 min
Going on an adventure with Nuxt 3, Motion UI and Azure
We love easily created and deployed web applications! So, let’s see what a very current tech stack like Nuxt 3, Motion UI and Azure Static Web Apps can do for us. It could very well be a golden trio in modern day web development. Or it could be a fire pit of bugs and errors. Either way it will be a learning adventure for us all. Nuxt 3 has been released just a few months ago, and we cannot wait any longer to explore its new features like its acceptance of Vue 3 and the Nitro Engine. We add a bit of pizzazz to our application with the Sass library Motion UI, because static design is out, and animations are in again.
Our driving power of the stack will be Azure. Azure static web apps are new, close to production and a nifty and quick way for developers to deploy their websites. So of course, we must try this out.
With some sprinkled Azure Functions on top, we will explore what web development in 2022 can do.
Node Congress 2023Node Congress 2023
85 min
Node.js: Landing your first Open Source contribution & how the Node.js project works
This workshop aims to give you an introductory module on the general aspects of Open Source. Follow Claudio Wunder from the OpenJS Foundation to guide you on how the governance model of Node.js work, how high-level decisions are made, and how to land your very first contribution. At the end of the workshop, you'll have a general understanding of all the kinds of work that the Node.js project does (From Bug triage to deciding the Next-10 years of Node.js) and how you can be part of the bigger picture of the JavaScript ecosystem.
The following technologies and soft skills might be needed):
  - Basic understanding of Git
GitHub interface
  - Professional/Intermediate English knowledge for communication and for allowing you to contribute to the Node.js org (As all contributions require communication within GitHub Issues/PRs)
  - The workshop
you to have a computer (Otherwise, it becomes difficult to collaborate, but tablets are also OK) with an IDE setup, and we recommend
VS Code
and we recommend the
GitHub Pull Requests
Extension for collaborating with Issues and Pull Requests straight from the IDE.
The following themes will be covered during the workshop:
- A recap of some of GitHub UI features, such as GitHub projects and GitHub Issues
- We will cover the basics of Open Source and go through Open Source Guide
- We will recap Markdown
- We will cover Open Source governance and how the Node.js project works and talk about the OpenJS Foundation
  - Including all the ways one might contribute to the Node.js project and how their contributions can be valued
- During this Workshop, we will cover Issues from the nodejs/ as most of them are entry-level and do not require C++ or deep technical knowledge of Node.js.
  - Having that said, we still recommend enthusiast attendees that want to challenge themselves to "Good First Issues" from the nodejs/node (core repository) if they wish.
  - We're going to allow each attendee to choose an issue or to sit together with other attendees and tackle issues together with Pair Programming through VS Code Live Share feature
    - We can also do Zoom breakrooms for people that want to collaborate together
  - Claudio will be there to give support to all attendees and, of course, answer any questions regarding Issues and technical challenges they might face
  - The technologies used within nodejs/ are React/JSX, Markdown, MDX and Gatsby. (No need any knowledge of Gatsby, as most of the issues are platform agnostic)
- By the end of the Workshop, we'll collect all (make a list) the contributors who successfully opened a Pull Request (even if it's a draft) and recognise their participation on Social media.