Módulos Nuxt 3 y Código Abierto

Hola, Vue JS Live, gracias por tenerme aquí. Y comencemos con algunos números, ¿de acuerdo? Entonces, ¿qué crees que se refiere a los 2 millones? Bueno, te di esa respuesta, ese es el número de descargas que Nuxt.js tuvo en los últimos 30 días. ¿Y qué puede ser 16 millones entonces? Bueno, probablemente ya lo esperabas, ese es el número de descargas que Vue.js en sí mismo tuvo en los últimos 30 días. Así que bien, Vue tiene 16 millones, Nuxt tiene 2 millones. ¿Y qué puede ser 14 millones en esa historia? Debe ser algo grande. Bueno, resulta que ese es el número de descargas que todos los módulos de Nuxt.js tuvieron en total en los últimos 30 días. Estadística interesante, ¿verdad? Bueno, esto solo puede significar dos cosas. En primer lugar, tal vez una persona instaló 14 millones de módulos en los últimos 30 días, o en promedio, cada proyecto de Nuxt.js utiliza 7 módulos. Las matemáticas no pueden determinar cuál es verdadero. Pero, bueno, para mí esto definitivamente significa que los módulos de Nuxt.js son una parte central de Nuxt. Y me gustaría hablar de ellos hoy. Así que hablemos de los módulos de Nuxt.js. Veremos de qué se tratan, cómo puedes crear algunos, pero también, lo que es más importante, por qué te gustaría crear algunos. Y finalmente, veremos cómo pueden ayudarte a involucrarte y comenzar con el código abierto gracias a los módulos de Nuxt.js. Así que hablemos de eso.

Pero, bueno, en primer lugar, soy Lucie Aberer, soy de Francia, como probablemente habrás adivinado por mi acento. Comencé mi trayectoria como desarrolladora trabajando con MediaWiki, el software en el que se ejecuta Wikipedia. Pero hoy en día, trabajo en Prismic como ingeniera de experiencia de desarrollo. Me divierto en Prismic gestionando su empresa, el ecosistema de código abierto y Prismic es un CMS y constructor de páginas.

Finalmente, soy una orgullosa colaboradora y miembro del equipo principal de Nuxt. He estado trabajando con Nuxt durante casi seis años, así que empiezas a ver la conexión con esta charla. Pero de todos modos, suficiente con charlar, vamos a la charla.

Y quiero intentar algo un poco diferente con esta charla para hacerla interactiva. Solo un poco, no te preocupes. Así que construí esta cosa que funciona como un carrito, excepto que no hay música, pero básicamente me permite hacerte preguntas. Y lo primero que me gustaría preguntarte es si alguna vez has escrito un módulo de Nuxt. Así que por favor, toma tu teléfono inteligente y escanea uno de los códigos QR para enviar tu respuesta, alternativamente puedes seguir los enlaces si estás en una computadora portátil, y bueno, veamos de qué se trata.

Bueno, eso es, bueno, no voy a mentir, eso es lo que esperaba. Eso es genial, como la mayoría de nosotros no escribimos módulos de Nuxt aquí, y eso está perfectamente bien. Así que hablemos de ellos, ¿qué son los módulos de Nuxt? Y también, no te preocupes, si eres nuevo en Nuxt y no sabes qué es, lo explicaré de manera sencilla para que todos puedan seguirlo.

Entonces, Nuxt, como algunos de ustedes sabrán, es un metaframework para Vue.js, y según su documentación, los módulos de Nuxt.js pueden ampliar su funcionalidad principal y tienen integraciones infinitas. Bastante poderoso, ¿verdad? Pero básicamente, esto significa que los módulos de Nuxt son como complementos para Nuxt. Puedes agregarlos y actualizar Nuxt con eso. Y concretamente, esto significa que puedes hacer, por ejemplo, el primer módulo para hacer que tu sitio web de Nuxt sea una PWA, hasta, por ejemplo, encender luces conectadas en tu habitación si hay un error en tu código. Yo ciertamente lo hice más tarde. Pero bueno, y desde un enfoque concreto, los módulos de Nuxt se registran dentro de la configuración de Nuxt. Puede ser un nombre de paquete que hayas instalado, un módulo que tengas localmente o simplemente el código del módulo directamente. Y puedes proporcionar opciones al módulo utilizando esta sintaxis directa o claves de configuración específicas que llamas por módulo. Así que, está bien. Eso nos da una comprensión relativa de qué se trata los módulos de Nuxt. Pero, bueno, agreguemos algunos detalles a eso.

Entonces, en primer lugar, como hemos visto, hay un módulo de Nuxt para todo. Y hablando de PWA antes, bueno, ¿adivina qué? Hay un módulo de Nuxt para eso. Se encarga de todo lo relacionado con hacerlo posible y es fácil de configurar. Otro ejemplo aleatorio, quieres conectarte a tu CMS favorito. No sabes qué hacer. Nuevamente, hay un módulo para eso. Está mantenido por una persona maravillosa. ¿Qué más se puede pedir? Pero, está bien, seguro, también hay muchos otros excelentes módulos de CMS disponibles, incluido nuestro amigo storyblock allí. Así que puedes consultar cualquiera de ellos. Pero captas mi punto. Con Nuxt 3, si quieres integrarte con algo, bueno, es probable que haya un módulo para eso. Y puedes consultar este sitio web de Nuxt.com para obtener la lista más completa de módulos disponibles.

Entonces, bien. Ahora centrémonos en los módulos de Nuxt. Y quiero decirte algo muy importante sobre los módulos de Nuxt. Es que puedes crear los tuyos propios.

¿No me crees? Bueno, puedo demostrártelo. Es probable que si estás trabajando con Nuxt, seas un desarrollador. Y resulta que los desarrolladores a veces escriben código. Y bueno, los módulos de Nuxt están hechos precisamente de eso. Y no sé, pero entre tú y yo, puedo ver una línea bastante directa desde ti hacia los módulos de Nuxt.

Entonces, puedes crear módulos de Nuxt. Pero, bueno. Más realistamente, ¿por qué querrías crear tus propios módulos de Nuxt? Especialmente cuando ya hay tantos módulos disponibles. Bueno, hay varias razones para eso. En primer lugar, como hemos visto, los módulos de Nuxt pueden hacer prácticamente cualquier cosa. Y en ese sentido, son una excelente manera de abstraer el código de diferentes proyectos y compartirlo para que esté disponible para ti. Esto funciona muy bien si eres una agencia que crea sitios web para otros o una empresa que gestiona diferentes aplicaciones internas. Personalmente, lo hice cuando trabajaba como freelancer y tenía algunos módulos para gestionar encabezados meta, transformar Nuxt de una manera particular o incluso generar estadísticas en todo mi proyecto. Y la gran razón para crear tus propios módulos de Nuxt es facilitar la integración con la herramienta que utilizas. De hecho, cuando ya hay módulos disponibles para Tailwind o Sentry, no te quedes atrás con una herramienta específica que utilizas. En ese caso, ¿por qué no crearla? Tal vez sea una herramienta interna, tal vez sea otra cosa. No lo sé. Y no es necesario que sea algo muy sofisticado para empezar.

Entonces, bueno. Claro. Hay razones para crear módulos de Nuxt para todos, pero ¿cómo lo hacemos? Bueno, eso es lo que estoy a punto de mostrarte. Aprendamos juntos cómo crear módulos gratuitos de Nuxt. Y lo haremos de manera concreta. Entonces, la mejor manera de empezar y crear un módulo gratuito de Nuxt es usar Nuxt3, Nuxt3 CLA. Y con este comando, podemos inicializar un módulo de Nuxt, y luego solo tenemos que instalar las dependencias con el administrador de paquetes que prefieras y ya estás listo. Pero como no confío en la conexión Wi-Fi de esta sala, ya lo hice de antemano aquí. Entonces, bueno, lanzamos Nuxt3. Y terminamos con ese proyecto. ¿Cómo se ve? Bueno, tomémonos un minuto para recorrer esa estructura del proyecto. En primer lugar, tenemos algunos directorios.

Tenemos el directorio de código fuente, que es el código fuente de nuestro módulo. Tenemos algunas pruebas por defecto. Podemos olvidarnos de ellas por ahora. Y tenemos un directorio de pruebas. Este directorio de pruebas es simplemente la aplicación Next configurada con nuestro módulo localmente, que utilizaremos para desarrollar nuestro módulo.

Luego tenemos el archivo package.json aquí. Entonces, dentro de él, hay algunas cosas interesantes para tener en cuenta. En primer lugar, ya está configurado para ser enviado correctamente a npm. No tienes que preocuparte por eso. Luego, si observamos los scripts, hay varios de ellos. El script prepack se encarga de construir un módulo. Y utiliza este comando de construcción de módulos de Next. Este es un constructor interno desarrollado por NeXT sobre rollup y todas las herramientas geniales. Básicamente, se asegura de que tu código se empaquete correctamente de la manera que NeXT quiere que se empaquete para que se pueda utilizar correctamente dentro del proyecto Next. Eso es genial. Porque no tienes que pasar por la molestia de configurar un empaquetador o aprender uno solo para enviar tu módulo. Luego tenemos varios comandos dev. Se utilizan para interactuar con nuestro directorio de pruebas cuando se desarrolla un módulo. Los utilizaremos más adelante. Finalmente, tenemos un script ready que es el que usamos por defecto en todos los módulos de la comunidad en NeXT. Es como un solo script, lo lanza todo e implementa en npm. Pero puedes ajustarlo a tu gusto si es necesario.

En cuanto a las dependencias, bueno, tenemos NeXTKit instalado. Esta es una colección de utilidades proporcionadas por NeXT para desarrollar módulos. Las utilizaremos más adelante. Y finalmente, tenemos NeXTModuleBuilder, que proporciona el comando de construcción que hemos visto antes. Luego, en nuestro proyecto, tenemos varios archivos raíz. Seguro que conoces la mayoría de ellos. Puedes ajustarlos a tu gusto. Sin embargo, si planeas compartir tu módulo con la comunidad, es bueno mantener los valores predeterminados, ya que esto permite que tu módulo comparta un estilo de codificación consistente con los otros módulos de la comunidad disponibles.

Enfoquémonos ahora en el directorio SRC. Dentro de él, tenemos este archivo module.ts. Este es nuestro punto de entrada del módulo. Y como habrás notado, es un archivo TypeScript. En efecto. Con NextGit, TypeScript es el valor predeterminado para los módulos porque mejora significativamente la experiencia del desarrollador para los usuarios finales. Pero no te preocupes. Si no te sientes cómodo con TypeScript, aún puedes desarrollar módulos en JavaScript plano. Pero como esto nos generará un poco de tráfico hoy, nos quedaremos con ese archivo. Pero todo se verá como JavaScript plano. No te preocupes por eso.

Si ahora echamos un vistazo dentro, como puedes ver aquí, ya hay algo de código de plantilla. Explicaremos eso. En primer lugar, estamos importando algunas UTTs de NextGit, específicamente NextModule definido aquí. Y los utilizaremos más adelante. Luego tenemos una interfaz. Es una forma de describir la estructura de un objeto en TypeScript. Pero como prometí, no habrá magia negra de TypeScript hoy, así que podemos ignorarla de manera segura. Y luego tenemos nuestra exportación de módulo aquí, que utiliza el helper NextModule definido proporcionado por NextGit. Y nuestro módulo es el objeto aquí.

Entonces, bien, expliquemos la estructura de este objeto. En primer lugar, tenemos la propiedad meta. Esta es una colección de metadatos relacionados con nuestro módulo. Por lo tanto, el nombre de nuestro módulo, la clave de configuración que nos gusta usar y decirle a la configuración de Next que resuelva nuestras opciones de módulo. Entonces, si revisamos el Playground aquí, podemos ver que podemos escribir opciones para la clave myModule. Puede haber otros tipos de metadatos, como la compatibilidad del módulo, pero no necesitamos conocerlos hoy. Luego tenemos la propiedad defaults aquí. Aquí es donde puedes proporcionar opciones predeterminadas para tu módulo que se resolverán en función de las opciones proporcionadas por tus usuarios a tu módulo. De hecho, puedes decir que tu módulo necesita opciones para ejecutarse y, si no quieres que los usuarios proporcionen todas ellas, puedes establecer un valor predeterminado aquí. Y finalmente, tenemos la función de configuración aquí.

Este es el código que se ejecutará por Next al cargar nuestro módulo. Es una función que puede ser asíncrona si es necesario, pero se recomienda mantenerla sincrónica, de lo contrario puede tener algunos problemas de rendimiento. Recibe dos argumentos, las opciones proporcionadas por el usuario que coinciden con las opciones predeterminadas que definimos aquí, y el objeto next que podemos usar para interactuar con Next. Aquí tenemos un código de plantilla por defecto, pero podemos eliminarlo de forma segura ya que volveremos a él más adelante.

Entonces, bien, esa fue una sección bastante densa durante nuestra anatomía del módulo, y bueno, esto es realmente lo más importante que debes saber al respecto. Pero solo para recapitular lo que aprendimos. En primer lugar, la creación de un módulo se puede hacer con NextC en él. Los módulos vienen con nuevas opciones predeterminadas y un empaquetador de Next. Esta es una mejora bastante nueva en la experiencia de desarrollo de módulos. NextKit es un conjunto de helpers para desarrollar nuestro módulo, y los módulos se prueban por defecto. Y finalmente, los módulos se definen utilizando el nuevo helper NextModule definido, también proporcionado por NextKit.

Entonces, como dije, conocer la estructura básica ya es la parte más importante. Pero ahora intentemos hacer algunas cosas con nuestro módulo. Bueno, estoy un poco limitado de tiempo hoy, así que solo tengo tiempo para una demostración. Así que quiero preguntarte, ¿quieres que te muestre cómo un módulo puede proporcionar hojas de estilo y helpers a tu proyecto, o quieres que te muestre cómo un módulo puede integrarse con Next DevTools, que es esta nueva herramienta que se lanzó con Next a principios de este año y que es bastante emocionante? Una vez más, por favor, toma tu teléfono y envía tu voto, y bueno, haré una de esas dos opciones.

Muy bien. Bueno, está bastante parejo, pero tenemos mayoría para los activos, así que vamos con los activos. Y tal vez, en tiempo extra, intentaremos hacer los Next DevTools. Ya veremos. Así que, bueno, vamos con los activos. Y este es un camino interesante de tomar, porque es quizás la forma más sencilla de obtener valor de los módulos que hagas. Cuando pensamos en activos con un módulo, pensamos en el directorio de tiempo de ejecución, que es este directorio aquí que he ignorado hasta ahora. Dentro de él, puedes proporcionar cualquier tipo de activo que desees que el módulo inyecte, ya sea una hoja de estilo, un componente de vista, composables o incluso módulos 3D, como hemos visto antes. Es traicionero. Y bueno, comencemos haciendo algo realmente básico para empezar. Comenzaremos simplemente tratando de proporcionar una hoja de estilo. En este momento, mi aplicación de Next tiene un fondo blanco aquí. Crearemos un estilo que esté bien con CSS. Le agregaremos algo de estilo. Así que, vamos, fondo.

No, no el fondo. Lo siento. Cuerpo. Fondo. Rojo. Y ahora, una vez que tenemos este estilo CSS-bien, ¿cómo lo inyecto con mi módulo? Bueno, volvamos a nuestro módulo aquí y necesitamos hacer dos cosas para inyectarlo. En primer lugar, necesitamos crear un resolvedor. Para hacerlo, ya hemos importado el helper createResolver de NeXTKit.

Entonces, vamos const resolver equals create resolver. Y le proporcionaremos nuestro módulo, como, la ruta actual. Entonces, import.meta.url, que parece un poco como magia oscura, pero básicamente, solo estamos creando un helper que nos ayuda a resolver rutas de manera consistente dentro de nuestro sistema de archivos. Una vez que tenemos este helper, podemos acceder a NeXT.options.css, y simplemente agregamos nuestra - simplemente agregamos la ruta de nuestro archivo CSS. Entonces, vamos resolver.resolve y le proporcionamos una ruta. Entonces, vamos al directorio runtime y queremos nuestro archivo CSS.

Entonces, ahora puedo guardar eso, volver a mi terminal, reiniciar mi servidor NeXT. Y mientras NeXT se toma su tiempo para reiniciar en Windows, todo sigue en Windows, podemos notar aquí que para inyectar nuestro archivo CSS, simplemente accedemos a las opciones de NeXT. De hecho, los módulos de NeXT pueden leer y actualizar las opciones de NeXT, como deseen, desde la configuración de NeXT. Ahora, si ‑‑ bueno, NeXT debería haber terminado de reiniciar. Ahora podemos ver que tenemos nuestro fondo rojo llamativo inyectado dentro de una aplicación desde nuestro módulo. ¡Genial! Entonces. Sigamos trabajando con nuestro módulo por un momento. Y veamos cómo, por ejemplo, podemos inyectar un plugin desde él.

Los plugins de NeXT son una característica en NeXT que te permite inyectar cosas dentro de tu aplicación en tiempo de ejecución. Por defecto, el inicio del módulo viene con uno. Acabo de agregar esto, como, utilidades de formato aquí con fines de demostración. Y entonces, ¿cómo inyecto este módulo dentro de mi aplicación desde mi módulo? Para hacerlo, necesito hacer tres cosas. En primer lugar, necesito resolver la ruta de mi plugin. Nuevamente, uso mi resolvedor y voy a resolver.resolve. Y simplemente verificamos la ruta de nuestro plugin. Es runtime para el plugin.

Podemos deshacernos de esta extensión. Y luego necesitamos decirle a NeXT que transfiera tu plugin. Entonces, vamos a nextOptions.build.transfer.push, y agregamos nuestro plugin. Y finalmente, hacemos uso del proveedor de complementos de la aplicación proporcionado por NeXT Kit para decirle a NeXT que necesitas cargar este plugin. Entonces, vamos a app plugin, plugin, y ahora puedo guardar todo eso, reiniciar NeXT. Y nuevamente, mientras se reinicia, esta vez debería ser más rápido porque estoy un poco calentado.

Dentro de mi playground aquí, acabo de hacer un registro. Como, si está disponible en mi módulo, entonces simplemente hago un registro de ello. Y puedo volver aquí, inspeccionar el código, y tan pronto como se cargue, veremos nuestro código aparecer. Si se llama a NeXT, bien, aquí vamos. Puedes ver aquí, dentro de mi consola, tengo el registro de las utilidades de formato que inyectamos desde nuestro módulo. Entonces, está bien. Eso es lo interesante.

Hagamos un tercero. Con NeXT, es posible que estés familiarizado con las importaciones automáticas, como cuando tienes componentes dentro de tu directorio de importaciones, dentro de tu directorio de componentes, se importan automáticamente, no necesitas importarlos. Bueno, los módulos también pueden proporcionar importaciones automáticas. Así que creé este directorio de importaciones dentro de mi directorio runtime aquí, con algunas utilidades, Acabo de bajar mi zoom, algo y algo que predice un valor de bitcón. Bueno, gracias por gustar mis chistes tontos. Entonces, bueno, ¿cómo agrego todas esas utilidades para importar en una aplicación NeXT? Bueno, para hacerlo, puedo usar la utilidad add imports dir, también proporcionada por NeXTKit. Para ello, solo necesito hacer resolver.resolve una vez más para resolver una ruta lateral. Y solo le doy el runtime y la barra diagonal import. Y esto hará que todo en esta carpeta se importe automáticamente en mi aplicación NeXT. Entonces aquí, nuevamente, puedo reiniciar rápidamente mi NeXT. Puedo verificarlo con mi aplicación aquí. Descomentaré esta línea aquí. Entonces, ahora vemos que no hay una definición de tipo. Bueno, en realidad, aquí vamos. Ahora tenemos la definición de tipo de NeXT, porque NeXT las importó automáticamente para mí y creó esta definición de tipo para mí. Y si volvemos a nuestro navegador aquí, a la consola, veremos que tenemos el pong para el ping pong, el remipsum pequeño y el valor de bitcón para el próximo resumen. Así que está bien.

Entonces, este fue un ejemplo de lo que los módulos pueden hacer. Por supuesto, podemos hacer mucho más, como agregar importaciones automáticas para composables, agregar importaciones automáticas para componentes, interactuar con Nitro, puedes hacer cosas realmente poderosas con eso. O también usar los hooks del ciclo de vida de NeXT y más. Y muchas más. Pero no te preocupes por perderte algo. Hemos documentado muchos casos de uso en la documentación de los módulos de NeXT. Y podrás seguir eso.

Entonces eso no es todo, amigos. Hay una última cosa de la que necesito hablarles. Que hay algunos beneficios adicionales al aprender los módulos de NeXT. El primero es que al aprender los módulos de NeXT, obtendrás una comprensión más profunda de cómo funciona NeXT, sus internos y comportamientos. Y esto te permitirá solucionar problemas que tengas con NeXT de una manera más fácil. Y un dato curioso relacionado con eso es que NeXT en sí está parcialmente compuesto por módulos y depende de las API de los módulos.

Otra cosa es que al estar familiarizado con la estructura de los módulos de NeXT, esto te permite tener una mejor comprensión del módulo que estás utilizando. En ese sentido, siéntete libre de echar un vistazo al código fuente del módulo que estás utilizando. Por ejemplo, si echas un vistazo al código fuente del módulo NeXT ColorMod, verás que utiliza este patrón ingenioso de usar un alias de NeXT para inyectar sus opciones dentro de NeXT Runtime. Bueno, así es como aprendí mucho sobre NeXT realmente y tú también puedes hacerlo. La segunda cosa, ahora que estamos familiarizados con NeXT, cómo funcionan los módulos de NeXT y todo, todo esto te capacita para contribuir al ecosistema. ¿Encontraste un error mientras usabas un módulo? Puedes solucionarlo. ¿Tienes ganas de una función en tu módulo favorito? Haz una solicitud de extracción. La comunidad de NeXT es realmente amigable con los recién llegados y personalmente, así es como me sentí cómodo con el código abierto y comencé mi viaje y tú también puedes hacerlo. Y si no sabes por dónde empezar, nuevamente, simplemente ve a next.com/barra diagonal módulo para obtener una lista completa de los módulos de la comunidad disponibles de forma gratuita con NeXT.

Entonces, esa fue mi charla, módulos gratuitos de NeXT y código abierto. Realmente espero que hayas aprendido algunas cosas sobre los módulos de NeXT. Son una forma de ampliar las funcionalidades de NeXT infinitamente. Puedes crear módulos de NeXT para tu equipo, tu empresa o para toda la comunidad. NeXT está estructurado con libertad y viene con una mejor experiencia de desarrollo, aprender esa estructura te brinda una mejor comprensión de NeXT y te permite involucrarte en la comunidad. Puedes encontrar todos los recursos sobre esta charla. Código fuente de las diapositivas. Transcripción y más en Lucy.red.

Puedes seguirme en Twitter para obtener más información sobre NeXT y más de mis tonterías. Gracias a todos. Muchas gracias, Lucy. Esa fue una charla realmente interesante. Siéntete libre de sentarte. Y ahora profundicemos en algunas preguntas.

La primera pregunta es... Un momento. Bien, se está recargando, pero mientras se recarga, permíteme hacer mi pregunta. ¿Hay algún momento en el que decidas: `Ok, ahora necesito crear un módulo de NeXT`? Ok, sí. Por supuesto, no necesitamos crear un módulo para todo de inmediato, porque eso sería excesivo. Como dije, los módulos son excelentes para abstraer cosas. Pero cuando quieres abstraer cosas, tienes que... Bueno, no es gratuito. Tiene costos de mantenimiento. Así que debes preguntarte, ¿vale la pena abstraer eso? Si la respuesta es sí, entonces los modules son una opción para abstraer este código y compartirlo en varios proyectos. Por supuesto, si solo eres una empresa y estás creando un sitio web de e-commerce, puede que no haya muchos casos de uso para crear modules porque solo estás trabajando en un proyecto de NeXT. Pero si trabajas en una empresa más grande con múltiples proyectos de NeXT, o una agencia que crea sitios web a diario para varios clientes, entonces tienes la oportunidad de crear modules porque es posible que termines usando el mismo tipo de código. Sí, tiene mucho sentido, porque de lo contrario estarías gastando tiempo en abstraer toda la lógica y en realidad no obtendrías nada de ello. De acuerdo, ahora tenemos algunas preguntas más. Y la primera es, ¿cuál es el módulo de NeXT más extraño que has visto? Bueno, supongo que es uno de los modules que hice. Se llama Nuxt Hue. Básicamente, no sé si sabes, pero en mi casa tengo algunas bombillas Philips Hue que están conectadas. Puedo hacer que se pongan azules, rojas y de cualquier color. Básicamente, creé el módulo para que cuando haya un error en mi aplicación de NeXT, esas luces parpadeen en rojo en mi habitación, por supuesto. Y, wow, cuando desarrollo con NeXT, puede hacer eso. Fue bastante divertido de desarrollar y también bastante inútil.

Eso suena divertido. La segunda pregunta es, ¿cuál es tu módulo favorito que has creado o contribuido? Wow, por supuesto que es el módulo Nuxt Prismic. Es un gran módulo que puedes usar para integrarte con Prismic o CMS. Es realmente genial.

Ok, respuesta esperada. La siguiente pregunta es, ¿cuánto te preocupa que Nuxt introduzca cambios que rompan los módulos? Dentro del equipo principal de Nuxt, valoramos mucho el ecosistema de módulos, porque eso es lo que ha permitido que Nuxt se integre tan bien con tantas tecnologías. Seguimos lo mismo allí, y realmente hacemos todo lo posible para no introducir cambios que rompan los módulos y cosas que rompan el módulo, porque esto eventualmente perjudicará a todo el ecosistema. Sé que ha habido un camino difícil para actualizar de Nuxt 2 a Nuxt 3 y todavía estamos trabajando en eso para que la actualización sea más fácil para todos. Creo que Daniel hablará de eso más tarde hoy. Nos tomamos eso en serio y tratamos de no hacer que mantener los módulos sea un problema para todos.

Y en la práctica, ¿con qué frecuencia sucede eso, que tienes algunos cambios que rompen y necesitas lidiar con ellos? Bueno, Nuxt 3 fue obviamente un gran cambio porque introdujo el soporte de Nuxt 3 y también renovó todo desde el núcleo. En el futuro, tendremos más lanzamientos principales nuevos a un ritmo más rápido, como dentro de 1-2 años tal vez, pero esos serán cambios menores y tendremos una forma automatizada de realizar la actualización por ti.

Ok, gracias. La siguiente pregunta es, si ya estás usando un framework, como Quasar, ¿en qué momento tiene sentido cambiar a Nuxt? Bueno, en realidad no estoy familiarizado con Quasar, así que no estoy seguro de poder dar una respuesta clara a eso. Ok, lo siento. No te preocupes, entonces pasemos a la siguiente. Oh, animaste a la gente a crear módulos de Nuxt, porque la siguiente pregunta es qué módulo de Nuxt crees que falta crear. Bueno, con Nuxt, Nuxt ha existido durante muchos años, por lo que teníamos un ecosistema de módulos realmente vasto, pero la mayoría de ellos eran realmente geniales. Con Nuxt, el ecosistema todavía es más pequeño hoy, por lo que puede haber herramientas para las que tenemos un módulo de Nuxt 2 pero aún no tenemos un módulo de Nuxt 3. En ese caso, si te das cuenta de alguno de ellos, sé que estamos trabajando en el módulo de desactivación en este momento. Así que eres libre de unirte al esfuerzo y crear ese módulo y puedo migrarlo a Nuxt 3 para que todos puedan aprovecharlo nuevamente.

Ok, ahora tienes algunas ideas. La siguiente pregunta es, ¿Nuxt es compatible con Vue 2? Bueno, Nuxt 2 es compatible con Vue 2. Nuxt 3 es compatible con Vue 3. Y bueno, no planeamos que Nuxt 3 sea compatible con Vue 2 por varias razones, las cuales estoy feliz de discutir contigo si ese es tu problema. Tiene sentido, totalmente. Siguiente. ¿Crees que Vue debería tener un sistema de módulos como Nuxt? Bueno, Vue ya tiene un sistema de complementos que permite integrarse con Vue y crear integraciones con él. Por ejemplo, el módulo Prismic que proporcionamos a Nuxt en realidad solo inyecta principalmente un complemento de Vue. Tenemos esa integración de Prismic con Vue y lo hace bajo el capó junto con otras personalizaciones de Nuxt. Así que si quieres crear una integración con Vue, entonces debes revisar los complementos de Vue, supongo, o si estás pensando en la integración en tiempo de compilación, tal vez quieras echar un vistazo a los complementos de Vid.

Ok, gracias por eso. La siguiente pregunta es, ¿tiene el directorio de runtime un significado especial en este ejemplo? El directorio de runtime es más una convención, sin embargo, con el comando de construcción de módulos de Nuxt que tenemos, se aplica alguna configuración específica a este directorio de runtime para que haga algunas como la transpilación de todo lo que hay en él al construir tu módulo y, bueno, debes seguirlo por esa razón y, bueno, puede ser configurable, pero no hablaré más de eso. Solo una convención.

Gracias, y muchas preguntas, pero esta es la última. ¿Todos los tipos de modules se publican en el sitio web nux.com/barra invertida modules o necesitan pasar algo como una verificación de calidad de código? No realmente. Básicamente, si creas un módulo para integrarlo con una herramienta porque aún no existe y quieres convertirlo en un módulo de comunidad, solo tienes que contactarnos y te ayudaremos a hacer que ese módulo sea un módulo de comunidad oficial. Para hacerlo, solo tienes que abrir un ticket o un problema en GitHub, en el repositorio de módulos de nux GitHub, explicar lo que quieres lograr y te ayudaremos cuando llegue el momento y, como hacerlo como un módulo de nux de comunidad si quieres compartirlo con la comunidad en general.

De acuerdo, tiene sentido. Pero si no sabes cómo comenzar, puedes crear módulos de nux simplemente agregando el prefijo nux-npm a tu módulo y reconoceremos esos modules como modules de comunidad incluso si no están bajo la organización nux-js en npm. Tiene sentido. Nuestra gente aquí solo quiere romper cosas, así que tienen miedo. Genial. Muchas gracias Lucy por esta interesante charla. De nada. Eso es todo por las preguntas. Siéntanse libres de hacer más preguntas en el rincón de los oradores si las tienen y sí, hagan ruido por Lucy.