Wie man die Nuxt-Modul Registrierung programmatisch ändert

Nuxt bietet enorme Anpassungsmöglichkeiten. Das schließt das Modulsystem nicht aus, das programmatisch angepasst werden kann. Das ist insbesondere sehr praktisch, wenn man Nuxt's neues Layer-Feature benutzt.

Stellen wir uns die folgende Situation vor: wir haben ein Basisprojekt, das wir als Nuxt Layer in einem anderen Projekt verwenden. Mit anderen Worten: das Projekt (ich nenne es von nun an Child-Projekt) wird von einem anderen Projekt (ich nenne es Parent-Projekt) erweitert. Das Parent-Projekt fügt ein Nuxt-Modul, welches in den meisten Projekten die das Parent-Projekt als Layer nutzen notwendig ist, hinzu und registriert es. Aber unser spezielles Child-Projekt braucht die Funktionalität nicht, die das Modul bietet. Da es aber bereits in der Konfiguration des Parent-Projekts registriert ist, wird es in die endgültige, zusammengeführte Konfiguration von Child- und Parent-Projekt aufgenommen. Und was nun? 🤔

Nuxt Hook 'modules:before'

Nuxt bietet viele Hooks, die man in Modulen und/oder direkt in der Konfigurationsdatei verwenden kann. Der Hook modules:before erlaubt es, beliebig die Nuxt-Anwendung zu ändern, bevor die Module installiert werden. Er passt also perfekt für uns, um die Modulregistrierung programmatisch zu ändern. 💪

Um es in der Konfiguration zu verwenden, muss man den Konfigurationsschlüssel hooks verwenden. Er kann ein Objekt mit der hierarchischen Struktur der Hooks aufnehmen (https://nuxt.com/docs/api/configuration/nuxt-config#hooks). So wird der Hook modules:before zu folgendem:

export default defineNuxtConfig({  hooks: {    modules: {      before(){        // Nuxt hook modules:before        // do your thing      }    }  },})

Um innerhalb des Hooks Zugriff auf die Nuxt-Instanz zu bekommen, gibt es das praktische Composable useNuxt aus @nuxt/kit. Wir importieren es, um es in unserem Hook zu verwenden.
Von der Nuxt-Instanz erhalten wir Zugriff zu allen Optionen der Konfiguration, einschließlich der zu registrierenden Module. Wir können diese nun nach Belieben ändern und die Option modules mit unserem gewünschten Ergebnis überschreiben. In unserem Beispiel entfernen wir ein Modul, das nicht registriert/installiert werden soll.

// nuxt.config.jsimport { useNuxt } from '@nuxt/kit'export default defineNuxtConfig({  hooks: {    modules: {      before(){        const nuxt = useNuxt()        const { modules } = nuxt.options        const filteredModules = modules.filter((module) => {          if(typeof module === 'string'){            // Filter the module by name, @nuxt/image used as an example here            return module !== '@nuxt/image'          }          return true;        })        // Replace modules with our filtered modules        nuxt.options.modules = filteredModules;      }    }  }})

Das war's, wir haben ein Modul entfernt, das in einem Layer unseres Projekts registriert wurde 🥳
Natürlich kann man diese Methode auch für andere Dinge verwenden, z.B. um die Module neu zu ordnen, wenn man eine bestimmte Reihenfolge bei der Installation erreichen will.

Es erstaunt mich jedes Mal, wie erweiterbar und gut konzipiert dieses Framework ist 🎉.