⚙️

Nuxt 3 Plugins

👉

Nuxt 3 está en una beta bastante temprana en el momento en el que escribí este post. Puede ser que el contenido de este post ya no aplique o lo que intento resolver aquí ya esté resuelto en versiones más recientes.

Antes de todo te recomiendo que siempre eches un vistazo a la documentación oficial

Plugins en Nuxt 3, vamos allá.

Se registran automágicamente, si vienes de Nuxt 2 quizás te resulta familiar que cuando creas un plugin hay que registrarlo en el array plugins dentro del fichero nuxt.config.js

Pues en Nuxt 3 no. Con que crees el fichero del plugin dentro de la carpeta plugins es suficiente. Nuxt lo hace todo por ti. Bastante cómodo, eh?

Pero qué pasa cuando necesitas que los plugins se registren en un orden específico para que tu app no se rompa? Spoiler. No puedes hacerlo.

Problema

Tenía que hacer una serie de llamadas la backend para que en la carga inicial de la página tener disponible unos datos. Bien, cree un plugin que se encargaba de hacer todo esto, pero para mi sorpresa se ejecutaba antes que el plugin donde se declara toda la conexión con la API. Boom, nada funcionaba. Yo necesitaba hacerlo al revés.

Solución

Qué es lo que conozco? Nuxt 2. Como funciona en Nuxt 2? Con un array de plugins. Vamos a intentar replicarlo.

1. Registrar y organizar nuestros plugins

Vamos a crear una nueva carpeta en la raíz de nuestro proyecto, ahí vamos a meter los plugins que queremos que Nuxt no cargue de manera automática.

Yo me decidí por plugins-order y metí ahí los dos plugins que necesitaba ordenar.

plugins-order
 | - api.js
 | - load-data.js

Vale. Ahora vamos a declarar el array otherPlugins dentro del fichero nuxt.config.ts

export default defineNuxtConfig({
  otherPlugins: [
    '~/plugins-order/api.js',
    '~/plugins-order/load-data.js',
  ],
});
nuxt.config.ts

Ya tenemos organizado y pensado cómo nos gustaría trabajar con nuestros plugins. Ahora toca hacer que Nuxt se entere de toda la vaina.

2. Módulos al rescate

Creamos un modulo, en mi caso fue ~/modules/plugins-loader.js

import { ModuleOptions } from "@nuxt/schema";

export default function PluginLoaderModule(moduleOptions) {
  if (this.nuxt.options.otherPlugins) {
    this.nuxt.options.otherPlugins.forEach(
      plugin => this.nuxt.options.plugins.push({ src: plugin })
    )
  }
}
~/modules/plugins-loader.js

Comprobamos que existe el array otherPlugins que hemos añadido al nuxt.config.js y procedemos a registrar los plugins en ese mismo orden.

Registramos el módulo en la configuración de Nuxt nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    '~/modules/plugin-loader.js'
  ],
});
nuxt.config.ts

Y ya lo tendríamos. Trabajamos con ello como estamos acostumbrados en Nuxt 2. Metemos los plugins que queremos registrar y declarar en orden en la carpeta otherPlugins y los añadimos en el array otherPlugins que hemos creado.

Tip opcional

Si leemos la documentación nos daremos cuenta que solo se registran los plugins en el root de la carpeta plugins o los ficheros index de los subdirectorios. También puede tener sentido organizarlo todo tal que así

plugins
 | - order
 | --- api.js
 | --- load-data.js

De esta forma Nuxt no los registrará automáticamente y podremos hacerlo nosotros en nuestro módulo