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

• Nuxt Class
• Source: core/nuxt.js

Renderer

• Renderer Class
• Source: vue-renderer/renderer.js

ModuleContainer

• ModuleContainer Class
• Source: core/module.js

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