Nuxt Modules Intro

Nuxt.js 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:

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.

class SomeClass {
  constructor(nuxt) {
    super()
    this.nuxt = nuxt
    this.options = nuxt.options
  }

  someFunction() {
    // We have access to `this.nuxt` and `this.options`
  }
}

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

class FooClass {
  constructor(nuxt) {
    super()
    this.nuxt = nuxt
    this.options = nuxt.options

    this.nuxt.callHook('foo', this)
  }
}

So we can hook into foo module like this:

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