Nuxt Internals

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 hearth of Nuxt and should exist on both runtime and build time.

Nuxt

Renderer

Module Container

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 require them:

const { Nuxt, Builder, Utils } = require('nuxt')

Common patterns

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

const Tapable = require('tappable')

class SomeClass extends Tapable {
  constructor (nuxt, builder) {
    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 extends Tapable {
  constructor (nuxt, builder) {
    super()
    this.nuxt = nuxt
    this.options = nuxt.options

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

So we can hook into foo module like this:

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

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!