An Introduction to Nuxt Global Modules
Like Chrome extensions, but for your Nuxt.js environments.
Philips Hue
->
An Introduction to Nuxt Global Modules
Like Chrome extensions, but for your Nuxt.js environments.
1
Philips Hue
->
2
Philips Hue
API?
Local netork?
3
What if I Make a Nuxt Module for Philips Hue?
4
Philips Hue x Nuxt?
- Triggers lights on Nuxt startup
- Triggers other lights when ready
- And maybe some other upon error
5
Philips Hue x Nuxt?
- That’s possible
- It’s a fun concept
- Would make for a great tweet and video
6
7
3 Months to Make Nuxt Hue
8
What about collaborators that don’t have Philips Hue?
9
People who won’t
care about Nuxt Hue:
- GitHub CI
- Most of my coworkers
10
Why would I impact my codebase with something that’s only "fun"?
(apart from next level developer experience, ofc.)
11
Nuxt Hue:
- No impact on the codebase
- Configured once
- Installed globally
12
Nuxt Hue is a
Nuxt global module
13
I’m Lucie Haberer
a.k.a. lihbr
14
About Me
- I’m from Paris
- Computer Science Student
- Developer Experience Engineer at Prismic
- Proud Nuxt ambassador
- First talk ever
15
Quick Nuxt Module
Recap
Beginner friendly~
16
What are Nuxt modules?
17
Modules are Nuxt.js extensions which can extend its core functionality and add endless integrations.
18
What are Nuxt modules?
19
- Content -> @nuxt/content
- Storyblok -> nuxt-storyblok
- Strapi -> @nuxtjs/strapi
- Sanity -> @nuxtjs/sanity
- And more CMS modules…
20
You want to do X?
21
22
More Nuxt Modules Basics
Nuxt Modules are registered inside your Nuxt config file:
// nuxt.config.js
export default {
modules: [
"@nuxtjs/pwa",
"~/modules/my-module",
["@nuxtjs/prismic", { /* ... */ }],
],
buildModules: [/* works the same way */],
};23
More Nuxt Modules Basics
A Nuxt module is a function:
// ~/modules/my-module
export default function (moduleOptions) {
// Options provided to the module...
console.log(moduleOptions);
// Nuxt instance
console.log(this);
}24
Quick Nuxt Module Recap
- “There’s a module for that”
- Modules are registered inside Nuxt config
- Modules are functions
25
Nuxt Global Modules
(finally)
26
What are Nuxt global modules?
27
Global Module Features
- “There’s a module for that”
- Modules are registered inside Nuxt config
- Global modules are registered and configured globally (once)
- Modules are functions
28
Global Module Features
- There’s plenty to be built
- Global modules are registered and configured globally (once)
- Global modules are functions
- Global modules have no impact on the codebase nor the final website
29
What do global modules enable us to do?
30
Global Modules Power
Global modules have no impact on the codebase nor the final website.
-^
Global modules work transparently across all Nuxt projects on your computer.
31
Global Modules Power
A Chrome extension personalizes your experience on every website you visit.
-^
A global module personalizes your experience on every Nuxt project you work on.
32
Global modules are about personalization
33
Global Modules x Personalization
Enlighten your Nuxt experience
34
Global Modules x Personalization
- Having to install it on every project felt off
- Wouldn’t have used it so extensively if so
35
36
Global Modules x Personalization
- A global module that warns you when there are updates to your other Nuxt modules.
- A global module that gives you performance statistics about your current Nuxt project.
37
A Bad Example
A hypothetical Google Analytics module:
- Needs to impact your site directly
- Requires a per-project/shared configuration
- Overall is just not about personalization
38
Let’s Build One
Together!
…and jump to some code~
39
<live-coding />
40
.nuxtrc
41
.nuxtrc:
- Lives in your home directory:
~/.nuxtrc - Used by Nuxt to store telemetry preferences
- Uses the same interface as
nuxt.config.js - Used as a base to resolve Nuxt configs
- Uses RC syntax instead of JSON/JavaScript
42
<live-coding />
43
What We Achieved
44
.nuxtrc:
- Lives in our home directory:
~/.nuxtrc - Used as a base to resolve Nuxt configs
- Easily editable by a script using
rc9 - The go-to way to register global modules
45
Node CLIs:
- Are basically Node.js scripts
- Are shipped using the
binconfig ofpackage.json:{ "bin": { "module-docs": "./bin/cli.js" } } - A hashbang is necessary for the CLI to execute correctly:
#!/usr/bin/env node // CLI code...
46
What We Achieved
Regular module
->
Global module
- Now available transparently on all our Nuxt projects
- Shipped to npm, give it a try yourself:
npm install --global @lihbr/module-docs && module-docs
47
Global Modules Takeaways
48
Global modules:
- Are about personalization
- Have no impact on your codebase nor the final website
- Are built just like regular modules
- Are registered and configured globally through the
.nuxtrcfile - Work transparently across all our Nuxt projects
- A simple CLI makes for a great interface to enable, disable, and configure a global module
49
An Introduction to Nuxt Global Modules
Like Chrome extensions, but for your Nuxt.js environments.
50
All the Info
Everything from this talk & more:
-> lucie.red/nuxtnation-21
My blog:
-> lucie.red
Twitter:
-> lucie.red/twitter
51
Thanks!
52