Nuxt 3 Modules and Open-Source
Make your own, for your team or the whole community.
Let’s start with some numbers, shall we?
Nuxt 3 Modules and Open-Source
Make your own, for your team or the whole community.
Let’s start with some numbers, shall we?
2 million
Number of Nuxt downloads
over the last 30 days
16 million
Number of Vue downloads
over the last 30 days
16 million downloads
2 million downloads
14 million
Number of Nuxt Modules downloads
over the last 30 days
1 person installed
14 million modules
Nuxt projects use
7 modules on average
Nuxt Modules are a central part of Nuxt
Nuxt 3 modules:
- What they’re about?
- How you can make some and why?
- How to get involved in open-source with Nuxt Modules?
Let’s get started
shall we?
I’m Lucie Haberer
a.k.a. lihbr
About Me
- I’m from France
- Started development with MediaWiki
- Developer Experience Engineer at Prismic
- Proud Nuxt contributor & team member
What are Nuxt Modules?
Beginner friendly~
Modules are Nuxt.js extensions which can extend its core functionality and add endless integrations.
What are Nuxt Modules?
What are Nuxt Modules?
Nuxt Modules are registered inside your Nuxt config file:
import thirdModule from "third-module";
export default defineNuxtConfig({
modules: [
"@vite-pwa/nuxt",
"~/modules/my-module",
thirdModule,
[
"@nuxtjs/prismic",
{ endpoint: "example" }
],
],
pwa: { writePlugin: false }
});More on Modules
More on Modules
- Content -> @nuxt/content
- Storyblok -> @storyblok/nuxt
- Strapi -> @nuxtjs/strapi
- Sanity -> @nuxtjs/sanity
- And more CMS modules…
You want to do X?
Let’s stay focused on Nuxt 3 modules
You Can Make Your Own!
Don’t believe me?
Don’t believe me?
Don’t believe me?
You Can Make Modules!
Realistically, why would you want to make Nuxt modules of your own?
Especially with so many modules already out there?
Nuxt modules can do pretty much anything.
-^
Abtract code from your different projects and share it reliably.
You Can Make Modules!
Things that I abstracted from my projects:
- Vue Meta helpers
- Nuxt payload transformer
- Project statistics
Facilitate integration with the tools you use.
placeholder
placeholder
Tailwind CSS
Sentry
Facilitate integration with the (new or niche) tools you use.
-^
Craft modules for them, why not?
There are reasons to create Nuxt modules.
How do we do so?
Let’s Learn How to Create Nuxt 3 Modules!
Concretely~
Let’s start with Nuxt 3 CLI:
npx nuxi@latest init -t module my-module
Then, we’ll install dependencies…
<live-coding />
About our project:
- Creating a module can be done with
nuxi init - Modules come with new defaults and a bundler by Nuxt
-
@nuxt/kitis a set of helpers to develop Nuxt modules - Modules are TypeScript by default
- Modules are defined through
defineNuxtModulefrom@nuxt/kit
What do you want our module to do?
0
0
<live-coding />
Nuxt module with devtools integration starter:
npx nuxi@latest init -t module-devtools my-module-devtools
Then, we’ll again install dependencies…
<live-coding />
That was an example of what modules can do
- Adding auto-imports for composables
- Adding auto-imports for components
- Interacting with Nitro, Nuxt server engine
- Listening to Nuxt lifecycles with hooks
- And many more…
No FOMO!
Many recipes are documented: nuxt.com/docs/guide/going-further/modules
That's...
Extra Perks to Learning
Nuxt Modules
Extra Perks to Learning Nuxt Modules
- Deeper understanding of Nuxt behaviors and internals and easier issue troubleshooting.
- Nuxt itself is partly made of modules and relies on module APIs.
Extra Perks to Learning Nuxt Modules
Being familiar with Nuxt module structure allows to:
- Have a better understanding of modules you use
- foo
- bar
- baz
- bar
Extra Perks to Learning Nuxt Modules
import { defineNuxtModule } from "@nuxt/kit";
export default defineNuxtModule({
meta: { /* ... */ },
defaults: { /* ... */ },
setup(options, nuxt) {
/* ... */
// Inject options via virtual template
nuxt.options.alias['#color-mode-options'] = addTemplate({
filename: 'color-mode-options.mjs',
getContents: () => Object.entries(options).map(([key, value]) =>
`export const ${key} = ${JSON.stringify(value, null, 2)}
`).join('\n')
}).dst
/* ... */
},
});Extra Perks to Learning Nuxt Modules
Being familiar with Nuxt module structure allows to:
- Have a better understanding of modules you use
- Contribute to the ecosystem
- Found a bug? You can fix it!
- Craving for a feature? Open a PR~
Nuxt modules are an excellent way to get started and comfortable with open-source!
All community modules -> nuxt.com/modules
Nuxt 3 Modules and Open-Source
Make your own, for your team or the whole community.
Nuxt modules:
- Are a way to extend Nuxt functionalities endlessly
- You can make Nuxt modules, for your team or the whole community
- Modules are nicely structured and come with an improved developer experience in Nuxt 3
- Learning that structure gives you a better understanding of Nuxt
- Allows you to get involved in the community
All the Info
Everything from this talk & more:
-> lucie.red/london-23
Twitter:
-> lucie.red/twitter
Mastodon: