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.

Build

These classes are only needed for build or dev mode.

Builder

Builder Class
Source: builder/builder.js

Generator

Generator Class
Source: generator/generator.js

Common

Utils

Source: utils/src

Options

Source: config/options.js

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 => {
  // ...
})

Intro