Los sistemas de configuración y hooks de Nuxt hacen posible personalizar cada aspecto de Nuxt y añadir cualquier integración que puedas necesitar (plugins de Vue, CMS, rutas del servidor, componentes, registro de logs, etc.).

Los Módulos de Nuxt son funciones que se ejecutan secuencialmente al iniciar Nuxt en modo de desarrollo usando nuxt dev o al construir un proyecto para producción con nuxt build. Con los módulos, puedes encapsular, probar adecuadamente y compartir soluciones personalizadas como paquetes npm sin añadir código innecesario a tu proyecto o requerir cambios en Nuxt mismo.

Inicio Rápido

Recomendamos comenzar con los Módulos de Nuxt usando nuestro template de inicio:

npm create nuxt -- -t module my-module

Esto creará un proyecto my-module con todo el código base necesario para desarrollar y publicar tu módulo.

Próximos pasos:

1. Abre my-module en tu IDE de preferencia
2. Instala las dependencias usando tu gestor de paquetes favorito
3. Prepara los archivos locales para el desarrollo usando npm run dev:prepare
4. Sigue este documento para aprender más sobre los Módulos de Nuxt

Usando el Starter

Aprende cómo realizar tareas básicas con el módulo starter.

Cómo Desarrollar

Mientras que el código fuente de tu módulo reside dentro del directorio src, en la mayoría de los casos, para desarrollar un módulo, necesitas una aplicación de Nuxt. De eso se trata el directorio playground. Es una aplicación de Nuxt con la que puedes experimentar y que ya está configurada para ejecutarse con tu módulo.

Puedes interactuar con el playground como con cualquier aplicación de Nuxt.

• Lanza su servidor de desarrollo con npm run dev, debería recargarse automáticamente a medida que haces cambios en tu módulo en el directorio src
• Compílalo con npm run dev:build

Cómo Probar

El módulo starter viene con un conjunto básico de pruebas:

• Un linter impulsado por ESLint, ejecútalo con npm run lint
• Un ejecutor de pruebas impulsado por Vitest, ejecútalo con npm run test o npm run test:watch

Cómo Construir

Los Módulos de Nuxt vienen con su propio constructor proporcionado por @nuxt/module-builder. Este constructor no requiere ninguna configuración de tu parte, soporta TypeScript y asegura que tus activos estén correctamente empaquetados para ser distribuidos a otras aplicaciones de Nuxt.

Puedes construir tu módulo ejecutando npm run prepack.

Cómo Publicar

Aunque puedes publicar tu módulo aumentando su versión y usando el comando npm publish, el módulo starter viene con un script de lanzamiento que te ayuda a asegurarte de que publicas una versión funcional de tu módulo en npm y más.

Para usar el script de lanzamiento, primero, compromete todos tus cambios (recomendamos seguir Conventional Commits para aprovechar también el aumento automático de versión y la actualización del changelog), luego ejecuta el script de lanzamiento con npm run release.

Al ejecutar el script de lanzamiento, sucederá lo siguiente:

• Primero, ejecutará tu conjunto de pruebas mediante:
  • Ejecutar el linter (npm run lint)
  • Ejecutar pruebas unitarias, de integración y e2e (npm run test)
  • Construir el módulo (npm run prepack)
• Luego, si tu conjunto de pruebas fue bien, procederá a publicar tu módulo mediante:
  • Aumentar la versión de tu módulo y generar un changelog de acuerdo con tus Conventional Commits
  • Publicar el módulo en npm (para ese propósito, el módulo se construirá nuevamente para asegurar que su número de versión actualizado se tenga en cuenta en el artefacto publicado)
  • Empujar una etiqueta git que representa la versión recién publicada a tu origen remoto git

Desarrollando Módulos

Los Módulos de Nuxt vienen con una variedad de APIs y patrones poderosos que les permiten alterar una aplicación de Nuxt de prácticamente cualquier manera posible. Esta sección te enseña cómo aprovecharlos.

Anatomía del Módulo

Podemos considerar dos tipos de Módulos de Nuxt:

• módulos publicados que se distribuyen en npm - puedes ver una lista de algunos módulos de la comunidad en el sitio web de Nuxt.
• módulos "locales", que existen dentro de un proyecto de Nuxt en sí, ya sea incluidos en la configuración de Nuxt o como parte del directorio modules.

En cualquier caso, su anatomía es similar.

Definición del Módulo

La definición del módulo es el punto de entrada de tu módulo. Es lo que carga Nuxt cuando tu módulo es referenciado dentro de una configuración de Nuxt.

A un nivel bajo, una definición de Módulo de Nuxt es una función simple, potencialmente asíncrona, que acepta opciones de usuario en línea y un objeto nuxt para interactuar con Nuxt.

export default function (inlineOptions, nuxt) {
  // Puedes hacer lo que quieras aquí..
  console.log(inlineOptions.token) // `123`
  console.log(nuxt.options.dev) // `true` o `false`
  nuxt.hook('ready', async nuxt => {
    console.log('Nuxt está listo')
  })
}

Puedes obtener soporte de sugerencias de tipo para esta función usando el helper de nivel superior defineNuxtModule proporcionado por Nuxt Kit.

import { defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule((options, nuxt) => {
  nuxt.hook('pages:extend', pages => {
    console.log(`Se descubrieron ${pages.length} páginas`)
  })
})

Sin embargo, no recomendamos usar esta definición de función de bajo nivel. En su lugar, para definir un módulo, recomendamos usar la sintaxis de objeto con la propiedad meta para identificar tu módulo, especialmente al publicarlo en npm.

Este helper hace que escribir módulos de Nuxt sea más sencillo al implementar muchos patrones comunes necesarios por los módulos, garantizando la compatibilidad futura y mejorando la experiencia tanto para los autores de módulos como para los usuarios.

import { defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  meta: {
    // Usualmente el nombre del paquete npm de tu módulo
    name: '@nuxtjs/example',
    // La clave en `nuxt.config` que contiene las opciones de tu módulo
    configKey: 'sample',
    // Restricciones de compatibilidad
    compatibility: {
      // Versión Semver de las versiones de nuxt soportadas
      nuxt: '>=3.0.0'
    }
  },
  // Opciones de configuración predeterminadas para tu módulo, también puede ser una función que las devuelva
  defaults: {},
  // Azúcar sintáctico para registrar hooks de Nuxt
  hooks: {},
  // La función que contiene la lógica de tu módulo, puede ser asíncrona
  setup(moduleOptions, nuxt) {
    // ...
  }
})

Finalmente, defineNuxtModule devuelve una función envoltorio con la firma de módulo de bajo nivel (inlineOptions, nuxt). Esta función envoltorio aplica valores predeterminados y otros pasos necesarios antes de llamar a tu función setup:

• Soporte para defaults y meta.configKey para fusionar automáticamente las opciones del módulo
• Sugerencias de tipo e inferencia de tipo automatizada
• Añadir shims para compatibilidad básica con Nuxt 2
• Asegurar que el módulo se instale solo una vez usando una clave única calculada a partir de meta.name o meta.configKey
• Registrar automáticamente hooks de Nuxt
• Comprobar automáticamente problemas de compatibilidad basados en los metadatos del módulo
• Exponer getOptions y getMeta para uso interno de Nuxt
• Asegurar compatibilidad hacia atrás y hacia adelante siempre que el módulo use defineNuxtModule de la última versión de @nuxt/kit
• Integración con herramientas de construcción de módulos

Directorio de Runtime

Los módulos, como todo en una configuración de Nuxt, no están incluidos en el runtime de tu aplicación. Sin embargo, es posible que desees que tu módulo proporcione o inyecte código de runtime a la aplicación en la que está instalado. Eso es lo que permite hacer el directorio de runtime.

Dentro del directorio de runtime, puedes proporcionar cualquier tipo de activos relacionados con la App de Nuxt:

• Componentes de Vue
• Composables
• Plugins de Nuxt

Para el motor del servidor, Nitro:

• Rutas de API
• Middlewares
• Plugins de Nitro

O cualquier otro tipo de activo que desees inyectar en las aplicaciones de Nuxt de los usuarios:

• Hojas de estilo
• Modelos 3D
• Imágenes
• etc.

Luego podrás inyectar todos esos activos dentro de la aplicación desde tu definición del módulo.

Herramientas

Los módulos vienen con un conjunto de herramientas de primera parte para ayudarte con su desarrollo.

@nuxt/module-builder

Nuxt Module Builder es una herramienta de construcción sin configuración que se encarga de todo el trabajo pesado para construir y enviar tu módulo. Asegura la compatibilidad adecuada del artefacto de construcción de tu módulo con las aplicaciones de Nuxt.

@nuxt/kit

Nuxt Kit proporciona utilidades composables para ayudar a tu módulo a interactuar con las aplicaciones de Nuxt. Se recomienda usar las utilidades de Nuxt Kit sobre alternativas manuales siempre que sea posible para asegurar una mejor compatibilidad y legibilidad del código de tu módulo.

@nuxt/test-utils

Nuxt Test Utils es una colección de utilidades para ayudar a configurar y ejecutar aplicaciones de Nuxt dentro de las pruebas de tu módulo.

Recetas

Encuentra aquí patrones comunes usados para crear módulos.

Alterando la Configuración de Nuxt

La configuración de Nuxt puede ser leída y alterada por los módulos. Aquí hay un ejemplo de un módulo que habilita una característica experimental.

import { defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup (options, nuxt) {
    // Creamos el objeto `experimental` si aún no existe
    nuxt.options.experimental ||= {}
    nuxt.options.experimental.componentIslands = true
  }
})

Cuando necesites manejar alteraciones de configuración más complejas, deberías considerar usar defu.

Exponiendo Opciones al Runtime

Debido a que los módulos no son parte del runtime de la aplicación, sus opciones tampoco lo son. Sin embargo, en muchos casos, podrías necesitar acceso a algunas de estas opciones del módulo dentro de tu código de runtime. Recomendamos exponer la configuración necesaria usando el runtimeConfig de Nuxt.

import { defineNuxtModule } from '@nuxt/kit'
import { defu } from 'defu'

export default defineNuxtModule({
  setup (options, nuxt) {
    nuxt.options.runtimeConfig.public.myModule = defu(nuxt.options.runtimeConfig.public.myModule, {
      foo: options.foo
    })
  }
})

Ten en cuenta que usamos defu para extender la configuración de runtime pública que proporciona el usuario en lugar de sobrescribirla.

Luego puedes acceder a las opciones de tu módulo en un plugin, componente, la aplicación como cualquier otra configuración de runtime:

const options = useRuntimeConfig().public.myModule

Inyectando Plugins Con addPlugin

Los plugins son una forma común para que un módulo añada lógica de runtime. Puedes usar la utilidad addPlugin para registrarlos desde tu módulo.

import { defineNuxtModule, addPlugin, createResolver } from '@nuxt/kit'

export default defineNuxtModule({
  setup (options, nuxt) {
    // Crea un resolver para resolver rutas relativas
    const resolver = createResolver(import.meta.url)

    addPlugin(resolver.resolve('./runtime/plugin'))
  }
})

Inyectando Componentes de Vue Con addComponent

Si tu módulo debe proporcionar componentes de Vue, puedes usar la utilidad addComponent para añadirlos como auto-importaciones para que Nuxt los resuelva.

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

export default defineNuxtModule({
  setup(options, nuxt) {
    const resolver = createResolver(import.meta.url)

    // Desde el directorio de runtime
    addComponent({
      name: 'MySuperComponent', // nombre del componente para ser usado en plantillas vue
      export: 'MySuperComponent', // (opcional) si el componente es una exportación nombrada (en lugar de predeterminada)
      filePath: resolver.resolve('runtime/components/MySuperComponent.vue')
    })

    // Desde una librería
    addComponent({
      name: 'MyAwesomeComponent', // nombre del componente para ser usado en plantillas vue
      export: 'MyAwesomeComponent', // (opcional) si el componente es una exportación nombrada (en lugar de predeterminada)
      filePath: '@vue/awesome-components'
    })
  }
})

Alternativamente, puedes añadir un directorio completo usando addComponentsDir.

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

export default defineNuxtModule({
  setup(options, nuxt) {
    const resolver = createResolver(import.meta.url)

    addComponentsDir({
      path: resolver.resolve('runtime/components')
    })
  }
})

Inyectando Composables Con addImports y addImportsDir

Si tu módulo debe proporcionar composables, puedes usar la utilidad addImports para añadirlos como auto-importaciones para que Nuxt los resuelva.

import { defineNuxtModule, addImports, createResolver } from '@nuxt/kit'

export default defineNuxtModule({
  setup(options, nuxt) {
    const resolver = createResolver(import.meta.url)

    addImports({
      name: 'useComposable', // nombre del composable para ser usado
      as: 'useComposable',
      from: resolver.resolve('runtime/composables/useComposable') // ruta del composable
    })
  }
})

Alternativamente, puedes añadir un directorio completo usando addImportsDir.

import { defineNuxtModule, addImportsDir, createResolver } from '@nuxt/kit'

export default defineNuxtModule({
  setup(options, nuxt) {
    const resolver = createResolver(import.meta.url)

    addImportsDir(resolver.resolve('runtime/composables'))
  }
})

Inyectando Rutas del Servidor Con addServerHandler

import { defineNuxtModule, addServerHandler, createResolver } from '@nuxt/kit'

export default defineNuxtModule({
  setup(options, nuxt) {
    const resolver = createResolver(import.meta.url)

    addServerHandler({
      route: '/api/hello',
      handler: resolver.resolve('./runtime/server/api/hello/index.get')
    })
  }
})

También puedes añadir una ruta de servidor dinámica:

import { defineNuxtModule, addServerHandler, createResolver } from '@nuxt/kit'

export default defineNuxtModule({
  setup(options, nuxt) {
    const resolver = createResolver(import.meta.url)

    addServerHandler({
      route: '/api/hello/:name',
      handler: resolver.resolve('./runtime/server/api/hello/[name].get')
    })
  }
})

Inyectando Otros Activos

Si tu módulo debe proporcionar otros tipos de activos, también pueden ser inyectados. Aquí hay un módulo de ejemplo simple que inyecta una hoja de estilo a través del array css de Nuxt.

import { defineNuxtModule, addPlugin, createResolver } from '@nuxt/kit'

export default defineNuxtModule({
  setup (options, nuxt) {
    const resolver = createResolver(import.meta.url)

    nuxt.options.css.push(resolver.resolve('./runtime/style.css'))
  }
})

Y uno más avanzado, exponiendo una carpeta de activos a través de la opción publicAssets de Nitro:

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

export default defineNuxtModule({
  setup (options, nuxt) {
    const resolver = createResolver(import.meta.url)

    nuxt.hook('nitro:config', async (nitroConfig) => {
      nitroConfig.publicAssets ||= []
      nitroConfig.publicAssets.push({
        dir: resolver.resolve('./runtime/public'),
        maxAge: 60 * 60 * 24 * 365 // 1 año
      })
    })
  }
})

Usando Otros Módulos en Tu Módulo

Si tu módulo depende de otros módulos, puedes añadirlos usando la utilidad installModule de Nuxt Kit. Por ejemplo, si quisieras usar Nuxt Tailwind en tu módulo, podrías añadirlo como se muestra a continuación:

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

export default defineNuxtModule<ModuleOptions>({
  async setup (options, nuxt) {
    const resolver = createResolver(import.meta.url)

    // Podemos inyectar nuestro archivo CSS que incluye las directivas de Tailwind
    nuxt.options.css.push(resolver.resolve('./runtime/assets/styles.css'))

    await installModule('@nuxtjs/tailwindcss', {
      // configuración del módulo
      exposeConfig: true,
      config: {
        darkMode: 'class',
        content: {
          files: [
            resolver.resolve('./runtime/components/**/*.{vue,mjs,ts}'),
            resolver.resolve('./runtime/*.{mjs,js,ts}')
          ]
        }
      }
    })
  }
})

Usando Hooks

Los hooks de ciclo de vida te permiten expandir casi todos los aspectos de Nuxt. Los módulos pueden engancharse a ellos programáticamente o a través del mapa hooks en su definición.

import { defineNuxtModule, addPlugin, createResolver } from '@nuxt/kit'

export default defineNuxtModule({
  // Engancharse al hook `app:error` a través del mapa `hooks`
  hooks: {
    'app:error': (err) => {
      console.info(`Ocurrió este error: ${err}`);
    }
  },
  setup (options, nuxt) {
    // Engancharse programáticamente al hook `pages:extend`
    nuxt.hook('pages:extend', (pages) => {
      console.info(`Se descubrieron ${pages.length} páginas`);
    })
  }
})

import { defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup (options, nuxt) {
    nuxt.hook('close', async nuxt => {
      // Tu código personalizado aquí
    })
  }
})

Añadiendo Plantillas/Archivos Virtuales

Si necesitas añadir un archivo virtual que pueda ser importado en la aplicación del usuario, puedes usar la utilidad addTemplate.

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

export default defineNuxtModule({
  setup (options, nuxt) {
    // El archivo se añade al sistema de archivos virtual interno de Nuxt y puede ser importado desde '#build/my-module-feature.mjs'
    addTemplate({
      filename: 'my-module-feature.mjs',
      getContents: () => 'export const myModuleFeature = () => "hello world !"'
    })
  }
})

Para el servidor, deberías usar la utilidad addServerTemplate en su lugar.

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

export default defineNuxtModule({
  setup (options, nuxt) {
    // El archivo se añade al sistema de archivos virtual de Nitro y puede ser importado en el código del servidor desde 'my-server-module.mjs'
    addServerTemplate({
      filename: 'my-server-module.mjs',
      getContents: () => 'export const myServerModule = () => "hello world !"'
    })
  }
})

Añadiendo Declaraciones de Tipo

También podrías querer añadir una declaración de tipo al proyecto del usuario (por ejemplo, para aumentar una interfaz de Nuxt o proporcionar un tipo global propio). Para esto, Nuxt proporciona la utilidad addTypeTemplate que tanto escribe una plantilla en el disco como añade una referencia a ella en el archivo nuxt.d.ts generado.

Si tu módulo debe aumentar los tipos manejados por Nuxt, puedes usar addTypeTemplate para realizar esta operación:

import { defineNuxtModule, addTemplate, addTypeTemplate } from '@nuxt/kit'

export default defineNuxtModule({
  setup (options, nuxt) {
    addTypeTemplate({
      filename: 'types/my-module.d.ts',
      getContents: () => `// Generado por my-module
        interface MyModuleNitroRules {
          myModule?: { foo: 'bar' }
        }
        declare module 'nitropack' {
          interface NitroRouteRules extends MyModuleNitroRules {}
          interface NitroRouteConfig extends MyModuleNitroRules {}
        }
        export {}`
    })
  }
})

Si necesitas un control más granular, puedes usar el hook prepare:types para registrar un callback que inyectará tus tipos.

const template = addTemplate({ /* opciones de plantilla */ })
nuxt.hook('prepare:types', ({ references }) => {
  references.push({ path: template.dst })
})

Actualizando Plantillas

Si necesitas actualizar tus plantillas/archivos virtuales, puedes aprovechar la utilidad updateTemplates de esta manera:

nuxt.hook('builder:watch', async (event, path) => {
  if (path.includes('my-module-feature.config')) {
    // Esto recargará la plantilla que registraste
    updateTemplates({ filter: t => t.filename === 'my-module-feature.mjs' })
  }
})

Pruebas

Las pruebas ayudan a asegurar que tu módulo funcione como se espera dado varios escenarios. Encuentra en esta sección cómo realizar varios tipos de pruebas contra tu módulo.

Unitarias e Integración

De Extremo a Extremo

Nuxt Test Utils es la biblioteca de referencia para ayudarte a probar tu módulo de manera de extremo a extremo. Aquí está el flujo de trabajo a adoptar con ella:

1. Crea una aplicación de Nuxt para ser usada como "fixture" dentro de test/fixtures/*
2. Configura Nuxt con este fixture dentro de tu archivo de prueba
3. Interactúa con el fixture usando utilidades de @nuxt/test-utils (por ejemplo, obteniendo una página)
4. Realiza comprobaciones relacionadas con este fixture (por ejemplo, "HTML contiene ...")
5. Repite

En la práctica, el fixture:

// 1. Crea una aplicación de Nuxt para ser usada como "fixture"
import MyModule from '../../../src/module'

export default defineNuxtConfig({
  ssr: true,
  modules: [
    MyModule
  ]
})

Y su prueba:

import { describe, it, expect } from 'vitest'
import { fileURLToPath } from 'node:url'
import { setup, $fetch } from '@nuxt/test-utils/e2e'

describe('ssr', async () => {
  // 2. Configura Nuxt con este fixture dentro de tu archivo de prueba
  await setup({
    rootDir: fileURLToPath(new URL('./fixtures/ssr', import.meta.url)),
  })

  it('renderiza la página de índice', async () => {
    // 3. Interactúa con el fixture usando utilidades de `@nuxt/test-utils`
    const html = await $fetch('/')

    // 4. Realiza comprobaciones relacionadas con este fixture
    expect(html).toContain('<div>ssr</div>')
  })
})

// 5. Repite
describe('csr', async () => { /* ... */ })

QA Manual Con Playground y Externamente

Tener una aplicación de Nuxt de playground para probar tu módulo mientras lo desarrollas es realmente útil. El módulo starter integra uno para ese propósito.

Puedes probar tu módulo con otras aplicaciones de Nuxt (aplicaciones que no son parte del repositorio de tu módulo) localmente. Para hacerlo, puedes usar el comando npm pack, o el equivalente de tu gestor de paquetes, para crear un archivo tarball desde tu módulo. Luego, en tu proyecto de prueba, puedes añadir tu módulo a los paquetes de package.json como: "my-module": "file:/path/to/tarball.tgz".

Después de eso, deberías poder referenciar my-module como en cualquier proyecto regular.

Mejores Prácticas

Con gran poder viene gran responsabilidad. Aunque los módulos son poderosos, aquí hay algunas mejores prácticas a tener en cuenta al crear módulos para mantener las aplicaciones eficientes y la experiencia del desarrollador excelente.

Módulos Asíncronos

Como hemos visto, los Módulos de Nuxt pueden ser asíncronos. Por ejemplo, puedes querer desarrollar un módulo que necesite obtener algunos datos de una API o llamar a una función asíncrona.

Sin embargo, ten cuidado con los comportamientos asíncronos ya que Nuxt esperará a que tu módulo se configure antes de pasar al siguiente módulo y comenzar el servidor de desarrollo, el proceso de construcción, etc. Prefiere diferir la lógica que consume mucho tiempo a los hooks de Nuxt.

Siempre Prefija las Interfaces Expuestas

Los Módulos de Nuxt deben proporcionar un prefijo explícito para cualquier configuración expuesta, plugin, API, composable o componente para evitar conflictos con otros módulos e internos.

Idealmente, deberías prefijarlos con el nombre de tu módulo (por ejemplo, si tu módulo se llama nuxt-foo, expón <FooButton> y useFooBar() y no <Button> y useBar()).

Sé Amigable con TypeScript

Nuxt tiene integración de TypeScript de primera clase para la mejor experiencia del desarrollador.

Exponer tipos y usar TypeScript para desarrollar módulos beneficia a los usuarios incluso cuando no usan TypeScript directamente.

Evita la Sintaxis CommonJS

Nuxt se basa en ESM nativo. Por favor, lee Módulos ES Nativos para más información.

Documenta el Uso del Módulo

Considera documentar el uso del módulo en el archivo readme:

• ¿Por qué usar este módulo?
• ¿Cómo usar este módulo?
• ¿Qué hace este módulo?

Enlazar al sitio web de integración y documentación siempre es una buena idea.

Proporciona una Demostración o Plantilla en StackBlitz

Es una buena práctica hacer una reproducción mínima con tu módulo y StackBlitz que añadas al readme de tu módulo.

Esto no solo proporciona a los posibles usuarios de tu módulo una forma rápida y fácil de experimentar con el módulo, sino también una forma fácil para que ellos construyan reproducciones mínimas que puedan enviarte cuando encuentren problemas.

No Anuncies Con una Versión Específica de Nuxt

Nuxt, Nuxt Kit y otras herramientas nuevas están hechas para tener en mente tanto la compatibilidad hacia adelante como hacia atrás.

Por favor, usa "X para Nuxt" en lugar de "X para Nuxt 3" para evitar la fragmentación en el ecosistema y prefiere usar meta.compatibility para establecer restricciones de versión de Nuxt.

Mantente Con los Valores Predeterminados del Starter

El módulo starter viene con un conjunto predeterminado de herramientas y configuraciones (por ejemplo, configuración de ESLint). Si planeas hacer open-source tu módulo, mantenerte con esos valores predeterminados asegura que tu módulo comparta un estilo de codificación consistente con otros módulos de la comunidad por ahí, haciendo más fácil para otros contribuir.

Ecosistema

El ecosistema de Módulos de Nuxt representa más de 15 millones de descargas mensuales de NPM y proporciona funcionalidades extendidas e integraciones con todo tipo de herramientas. ¡Puedes ser parte de este ecosistema!

Tipos de Módulos

Los módulos oficiales son módulos prefijados (con ámbito) con @nuxt/ (por ejemplo, @nuxt/content). Son hechos y mantenidos activamente por el equipo de Nuxt. Al igual que con el framework, las contribuciones de la comunidad son más que bienvenidas para ayudar a mejorarlos.

Los módulos de la comunidad son módulos prefijados (con ámbito) con @nuxtjs/ (por ejemplo, @nuxtjs/tailwindcss). Son módulos probados hechos y mantenidos por miembros de la comunidad. Nuevamente, las contribuciones son bienvenidas de cualquiera.

Los módulos de terceros y otros módulos de la comunidad son módulos (a menudo) prefijados con nuxt-. Cualquiera puede hacerlos, usar este prefijo permite que estos módulos sean descubiertos en npm. ¡Este es el mejor punto de partida para esbozar y probar una idea!

Los módulos privados o personales son módulos hechos para tu propio caso de uso o empresa. No necesitan seguir ninguna regla de nomenclatura para trabajar con Nuxt y a menudo se ven con ámbito bajo una organización npm (por ejemplo, @my-company/nuxt-auth).

Listando Tu Módulo de la Comunidad

Cualquier módulo de la comunidad es bienvenido para ser listado en la lista de módulos. Para ser listado, abre un issue en el repositorio nuxt/modules. El equipo de Nuxt puede ayudarte a aplicar las mejores prácticas antes de listar.

Unirse a nuxt-modules y @nuxtjs/

Al mover tus módulos a nuxt-modules, siempre hay alguien más para ayudar, y de esta manera, podemos unir fuerzas para hacer una solución perfecta.

Si tienes un módulo ya publicado y funcionando, y deseas transferirlo a nuxt-modules, abre un issue en nuxt/modules.

Al unirte a nuxt-modules podemos renombrar tu módulo de la comunidad bajo el ámbito @nuxtjs/ y proporcionar un subdominio (por ejemplo, my-module.nuxtjs.org) para su documentación.