docs: add section on custom hooks for Nuxt modules #32586
Conversation
|
|
WalkthroughA new subsection titled "Custom Hooks" was added to the module author guide in the documentation. This section explains how Nuxt modules can define and invoke their own custom hooks for extensibility. It provides guidance on invoking these hooks within the modules:done lifecycle hook to ensure all modules have registered their listeners. An example TypeScript code snippet is included to illustrate the process. No changes were made to any exported or public entities, and the update is limited to documentation content. ✨ Finishing Touches🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
docs/2.guide/3.going-further/3.modules.md (3)
562-567: Header depth may break the documentation outline
#### Using Hooks(4 #) is currently a top-level “recipe” subsection.
Placing “Custom Hooks” at#####(5 #) turns it into a nested subsection, so it will no longer appear at the same level in the sidebar / table of contents. If you intend “Custom Hooks” to be a peer topic rather than a sub-topic, promote it to####.
568-575: Missing type-augmentation example leaves TS users without IntelliSenseDeclaring
export interface ModuleHooks { … }on its own does not augment Nuxt’s hook typings. In TypeScript projects the interface must be merged into@nuxt/schema’sHooksto get proper autocomplete and type-safety:export interface ModuleHooks { 'my-module:custom-hook': (payload: { foo: string }) => void } +declare module '@nuxt/schema' { + interface Hooks extends ModuleHooks {} +}Including this extra snippet (or a short note) will prevent confusion for authors expecting the types to “just work”.
576-584: Unnecessaryawaitcould mislead readers
nuxt.callHookalready returns a promise that waits for all listeners to complete. In most real-world modules you would notawaitit insidemodules:done, because delaying the promise chain blocks Nuxt startup. Consider:- await nuxt.callHook('my-module:custom-hook', payload) + nuxt.callHook('my-module:custom-hook', payload)Either drop the
awaitor add a short explanation of the trade-off so copy--paste users don’t unintentionally slow down boot time.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
docs/2.guide/3.going-further/3.modules.md(1 hunks)
🧰 Additional context used
🧠 Learnings (1)
docs/2.guide/3.going-further/3.modules.md (1)
Learnt from: CR
PR: nuxt/nuxt#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-06-30T13:48:28.134Z
Learning: Applies to **/*.vue : Use `<script setup lang="ts">` and the composition API when creating Vue components
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: lint-docs
🔗 Linked issue
📚 Description
Adds a small section to describe custom hooks and that hooks that could be subscribed to by other modules should be called in
module:done.