Los módulos son los bloques de construcción de Nuxt. Kit proporciona un conjunto de utilidades para ayudarte a crear y usar módulos. Puedes usar estas utilidades para crear tus propios módulos o reutilizar módulos existentes. Por ejemplo, puedes usar la función defineNuxtModule para definir un módulo y la función installModule para instalar un módulo programáticamente.

defineNuxtModule

Define un módulo de Nuxt, fusionando automáticamente los valores predeterminados con las opciones proporcionadas por el usuario, instalando cualquier hook que se proporcione y llamando a una función de configuración opcional para un control total.

Uso

import { defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  meta: {
    name: 'my-module',
    configKey: 'myModule'
  },
  defaults: {
    enabled: true
  },
  setup (options) {
    if (options.enabled) {
      console.log('¡Mi módulo de Nuxt está habilitado!')
    }
  }
})

Tipo

// @errors: 2391
import type { ModuleDefinition, ModuleOptions, NuxtModule } from '@nuxt/schema'
// ---cut---
export function defineNuxtModule<TOptions extends ModuleOptions> (
  definition?: ModuleDefinition<TOptions, Partial<TOptions>, false> | NuxtModule<TOptions, Partial<TOptions>, false>,
): NuxtModule<TOptions, TOptions, false>

Parámetros

definition: Un objeto de definición de módulo o una función de módulo. El objeto de definición de módulo debe contener las siguientes propiedades:

Ejemplos

Usar configKey para Hacer tu Módulo Configurable

Al definir un módulo de Nuxt, puedes establecer un configKey para especificar cómo los usuarios deben configurar el módulo en su nuxt.config.

import { defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  meta: {
    name: 'my-module',
    configKey: 'myModule'
  },
  defaults: {
    // Opciones del módulo
    enabled: true
  },
  setup (options) {
    if (options.enabled) {
      console.log('¡Mi módulo de Nuxt está habilitado!')
    }
  }
})

Los usuarios pueden proporcionar opciones para este módulo bajo la clave correspondiente en nuxt.config.

export default defineNuxtConfig({
  myModule: {
    enabled: false
  }
})

Definir Requisitos de Compatibilidad del Módulo

Si estás desarrollando un módulo de Nuxt y utilizando APIs que solo son compatibles con versiones específicas de Nuxt, se recomienda encarecidamente incluir compatibility.nuxt.

export default defineNuxtModule({
  meta: {
    name: '@nuxt/icon',
    configKey: 'icon',
    compatibility: {
      // Versión de nuxt requerida en formato semver.
      nuxt: '>=3.0.0', // o usa '^3.0.0'
    },
  },
  async setup() {
    const resolver = createResolver(import.meta.url)
    // Implementar
  },
})

Si el usuario intenta usar tu módulo con una versión de Nuxt incompatible, recibirá una advertencia en la consola.

 WARN  El módulo @nuxt/icon está deshabilitado debido a problemas de incompatibilidad:
 - [nuxt] Se requiere la versión de Nuxt ^3.1.0 pero actualmente se está usando 3.0.0

installModule

Instala un módulo de Nuxt especificado programáticamente. Esto es útil cuando tu módulo depende de otros módulos. Puedes pasar las opciones del módulo como un objeto a inlineOptions y se pasarán a la función setup del módulo.

Uso

import { defineNuxtModule, installModule } from '@nuxt/kit'

export default defineNuxtModule({  
  async setup () {
    // instalará @nuxtjs/fontaine con la fuente Roboto y la fuente de respaldo Impact
    await installModule('@nuxtjs/fontaine', {
      // configuración del módulo
      fonts: [
        {
          family: 'Roboto',
          fallbacks: ['Impact'],
          fallbackName: 'fallback-a',
        }
      ]
    })
  }
})

Tipo

async function installModule (moduleToInstall: string | NuxtModule, inlineOptions?: any, nuxt?: Nuxt)

Parámetros

Ejemplos

import { defineNuxtModule, installModule } from '@nuxt/kit'

export default defineNuxtModule({  
  async setup (options, nuxt) {
    // instalará @nuxtjs/fontaine con la fuente Roboto y la fuente de respaldo Impact
    await installModule('@nuxtjs/fontaine', {
      // configuración del módulo
      fonts: [
        {
          family: 'Roboto',
          fallbacks: ['Impact'],
          fallbackName: 'fallback-a',
        }
      ]
    })
  }
})