Nuxt 3 Modules and Open-Source
Make your own, for your team or the whole community.
Talking To You Today…
Nuxt 3 Modules and Open-Source
Make your own, for your team or the whole community.
Talking To You Today…
Back in August 2021…
Vue 3
Nuxt 3
- Nuxt 2
- Nuxt 2 modules
- Awesome stuff
- Next steps
We’ll talk about
Nuxt 3!
We’ll talk about
Nuxt 3 Modules!
Nuxt 3 modules:
- What they’re about?
- How you can make some?
- 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
- Just done with Computer Science
- Developer Experience Engineer at Prismic
- Proud Nuxt contributor & ambassador
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 {
modules: [
"@nuxtjs/pwa",
"~/modules/my-module",
thirdModule,
[
"@nuxtjs/prismic",
{ endpoint: "https://example.cdn.prismic.io/api/v2" }
],
],
pwa: { icon: false }
};Modules with Nuxt 2
Modules with Nuxt 2
- Content -> @nuxt/content
- Storyblok -> @storyblok/nuxt
- Strapi -> @nuxtjs/strapi
- Sanity -> @nuxtjs/sanity
- And more CMS modules…
You want to do X?
Let’s talk about Nuxt 3!
Let’s talk about Nuxt 3!
Nuxt 3 modules:
- Are now a thing
- Nicer developer experience
- Tiny ecosystem as of today
- They’re the future!
Nuxt Module Recap
- Modules are addons for Nuxt
- Modules are registered inside Nuxt config
- Nuxt 2 module ecosystem is rich but "legacy"
- Nuxt 3 is fancy but "newborn"
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 project:
- 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!
Let’s Learn How to Create Nuxt 3 Modules
What’s new:
- First-class TypeScript support
- Stronger structure
- Nicer developer experience and defaults
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
<live-coding />
That was 3 things you can do with modules
- Adding auto-imports for composables
- Adding auto-imports for components
- And many more…
What about hooks?
What about hooks?
Hooks are windows to Nuxt internals to which you can hook to.
-^
They allow you to get information about, and alter Nuxt behaviors.
They are a bit advanced, but really what make Nuxt modules capable of anything.
import { defineNuxtModule } from "@nuxt/kit";
export default defineNuxtModule({
meta: { /* ... */ },
defaults: { /* ... */ },
hooks: {
"pages:extend": (pages) => {
console.info(`Discovered ${pages.length} pages`);
},
},
setup(options, nuxt) {
/* ... */
nuxt.hook("pages:extend", (pages) => {
console.info(`Discovered ${pages.length} pages`);
});
},
});About writing modules:
- Any code can run in the module
setupfunction -
@nuxt/kitprovides a lot of utilities for common tasks - The
runtimedirectory holds assets made available by the module - Hooks are windows to Nuxt internals, that can react to, and alter them
So we know how to module, what now?
So we know how to module, what now?
- Share our module on npm: pick a version +
npm publish
- Let’s test it at some point!
- Nuxt Test Utils still on their way~
- Streamline publishing process Standard Version CLI
That's...
I lied...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 -> modules.nuxtjs.org
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/amsterdam-22
Twitter: