Nuxt modules intro

Better understand Nuxt internals


Nuxt has a fully modular architecture which allows developers extending any part of Nuxt Core using a flexible API.

Please see Modules Guide for more detailed information if interested developing your own module.

This section helps getting familiar to Nuxt internals and can be used as a reference to understand it better while writing your own modules.

Core

These classes are the heart of Nuxt and should exist on both runtime and build time.

Nuxt

Renderer

ModuleContainer

Build

These classes are only needed for build or dev mode.

Builder

Generator

Common

Utils

Options

Packaging & Usage

Nuxt exports all classes by default. To import them:

  1. import { Nuxt, Builder, Utils } from 'nuxt'

Common patterns

All Nuxt classes have a reference to nuxt instance and options, this way we always have a consistent API across classes to access options and nuxt.

  1. class SomeClass {
  2. constructor(nuxt) {
  3. super()
  4. this.nuxt = nuxt
  5. this.options = nuxt.options
  6. }
  7. someFunction() {
  8. // We have access to `this.nuxt` and `this.options`
  9. }
  10. }

Classes are pluggable so they should register a plugin on main nuxt container to register more hooks.

  1. class FooClass {
  2. constructor(nuxt) {
  3. super()
  4. this.nuxt = nuxt
  5. this.options = nuxt.options
  6. this.nuxt.callHook('foo', this)
  7. }
  8. }

So we can hook into foo module like this:

  1. nuxt.hook('foo', foo => {
  2. // ...
  3. })