Nuxt 3 Modules y Open-Source

Hola, Vue JS Live, gracias por invitarme. Y comencemos con algunos números, ¿de acuerdo? Entonces, ¿a qué crees que se refieren 2 millones? Bueno, te di esa, ese es el número de descargas que Nuxt.js tuvo en los últimos 30 días. ¿Qué pueden ser entonces 16 millones? Bueno, probablemente lo viste venir, ese es el número de descargas que Vue.js tuvo en los últimos 30 días. Así que está bien, Vue es 16 millones, Nuxt es 2 millones. ¿Qué pueden ser 14 millones en esa historia? Debe ser algo grande. Bueno, resulta que ese es el número de descargas que los módulos de Nuxt.js tuvieron en los últimos 30 días. Estadística interesante, ¿eh? 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 que en promedio, cada proyecto de Nuxt.js utiliza 7 módulos. Las matemáticas no pueden averiguar cuál es cierto. 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 contigo sobre ellos hoy. Así que hablemos de los módulos de Nuxt.js. Veremos de qué se tratan, cómo puedes hacer algunos, pero también más importante, por qué te gustaría hacer 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, primero que nada, soy Lucie Aberer, soy de Francia, como probablemente adivinaste por mi acento. Comencé mi viaje 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 desarrollador. Me divierto en Prismic gestionando su empresa, ecosistema de código abierto, y Prismic es un CMS y constructor de páginas.

Finalmente, soy una orgullosa colaboradora de Nuxt y miembro del equipo central. 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, basta de charlas, vamos a la charla.

Y quiero intentar algo un poco 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 preguntarte sobre algo. Y la primera cosa que me gustaría preguntarte es si alguna vez has escrito un módulo de Nuxt. Así que por favor toma tu smartphone y escanea uno de los códigos QR para enviar tu respuesta, alternativamente puedes simplemente seguir los enlaces si estás en una laptop, 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, como qué son los módulos de Nuxt. Y también, no te preocupes, si eres nuevo en Nuxt, y no sabes qué es, lo haré amigable para principiantes para que todos puedan seguirlo.

Así que Nuxt, como algunos de ustedes podrían saber, es un meta framework para Vue.js, y según su documentación, extensiones de Nuxt.js que pueden extender su funcionalidad central y tener integraciones infinitas. Bastante poderoso, ¿eh? Pero básicamente, lo que esto significa es 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, como, el primer módulo para hacer que tu sitio web de Nuxt sea un PWA, hasta, como, luces conectadas que parpadean en tu habitación, si hay un error con tu código, por ejemplo. 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. Así que puede ser un nombre de paquete que hayas instalado, un módulo, como, que tengas localmente, o simplemente el código del módulo directamente. Y puedes proporcionar opciones al módulo usando 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é tratan los módulos de Nuxt. Pero, bueno, agreguemos algunos detalles a eso.

Así que, primero que nada, como hemos visto, hay, como, un módulo de Nuxt para todo. Y hablando de PWA anteriormente, bueno, ¿adivina qué? Hay un módulo de Nuxt para eso. Se encarga de todo el gosha relacionado para hacer eso 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 pedir? Pero, está bien, claro, también hay muchos otros grandes módulos de CMS por ahí, incluyendo a nuestro amigo storyblock por allí. Así que puedes ir a ver cualquiera de ellos. Pero entendiste mi punto. Con Nuxt 3, quieres integrar con algo, bueno, lo más probable es que haya el próximo módulo para eso. Y puedes ir a consultar este sitio web para los módulos de Nuxt.com para la lista más completa de módulos disponibles por ahí.

Así que, está bien. Ahora enfoquémonos nuevamente en los módulos de Nuxt. Y quiero decirte algo realmente importante sobre los módulos de Nuxt. Es que puedes hacer los tuyos propios.

¿No me crees? Bueno, puedo probarlo. Es probable que si estás trabajando con Nuxt, seas un desarrollador. Sucede 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 recta desde ti hasta los módulos de Nuxt.

Así que, puedes hacer módulos de Nuxt. Pero, está bien. Más realísticamente, ¿por qué querrías hacer tus propios módulos de Nuxt? Especialmente con tantos módulos ya disponibles. Bueno, hay múltiples 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 código de diferentes proyectos y compartirlo de manera disponible. Esto funciona muy bien si eres una agencia que hace 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 meta headers, transformar Nuxt de una manera particular o incluso generar estadísticas a lo largo de mi proyecto. Y la gran razón para hacer tus propios módulos de Nuxt es facilitar la integración con la herramienta que usas. De hecho, cuando hay módulos por ahí para tailwind o sentry, intenta no ser uno sobre una herramienta específica que usas. En ese caso, ¿por qué no crearlo? Tal vez sea una herramienta interna, tal vez sea otra cosa. No lo sé. Y no necesita ser súper elegante para comenzar.

Así que, está bien. 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 a crear módulos gratuitos de Nuxt juntos. Y lo haremos concretamente. Así que, la mejor manera de comenzar y crear un módulo gratuito de Nuxt es usar Nuxt3, Nuxt3 CLA. Y con este comando, podemos iniciar un módulo de Nuxt, y luego solo tenemos que instalar dependencias con cualquier gestor de paquetes que prefieras y estarás listo para comenzar. Pero como no tengo confianza en la conexión Wi-Fi de esta sala, ya lo hice de antemano aquí mismo. Así que, bueno, lanzamos Nuxt3. Y terminamos con ese proyecto. Entonces, ¿cómo se ve? Bueno, tomemos un minuto para recorrer esa estructura de producto. En primer lugar, tenemos algunos directorios.

Tenemos el directorio 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 playground. Este directorio de playground es solo la siguiente aplicación configurada con nuestro módulo localmente que usaremos para desarrollar nuestro módulo.

Luego tenemos el archivo package.json aquí. Así que dentro de él, hay algunas cosas interesantes a notar. En primer lugar, ya está configurado para ser enviado correctamente a npm. No tienes que preocuparte por eso. Luego, si miramos los scripts, hay múltiples de ellos. El script prepack se encarga de construir un módulo. Y está usando este elegante comando next module build. Este es un constructor interno desarrollado por NeXT sobre rollup y todas las herramientas geniales. Y básicamente solo se asegura de que tu código esté empaquetado correctamente de la manera que NeXT quiere que esté empaquetado para ser usado correctamente dentro del siguiente proyecto. Eso es genial. Porque no tienes que pasar por el dolor de cabeza de configurar un empaquetador o aprender uno solo para enviar tu módulo. Luego tenemos múltiples comandos dev. Estos se usan para interactuar con nuestro playground al desarrollar un módulo. Los usaremos más adelante. Finalmente, tenemos un script ready que es uno por defecto que usamos en todos los módulos de la comunidad en NeXT. Es como un solo script, lánzalo todo y desplégalo en npm. Pero puedes ajustarlo a tu gusto si lo necesitas.

En cuanto a las dependencias, bueno, tenemos NeXTKit instalado. Esta es una colección de utilidades proporcionadas por NeXT para desarrollar módulos. Lo usaremos más adelante. Y finalmente, tenemos NeXTModuleBuilder, que proporciona el comando de construcción que hemos visto antes. Luego, en nuestro proyecto, tenemos múltiples archivos raíz. Conoces la mayoría de ellos, estoy seguro. Puedes ajustarlos a tu gusto. Una cosa, sin embargo, si planeas compartir tu módulo con la comunidad, es bueno mantenerte con 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 por ahí.

Centré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. De hecho. Con NextGit, TypeScript es el predeterminado para los módulos porque resulta en una experiencia de desarrollador mucho mejor para los usuarios finales. Pero no te preocupes. Si no te sientes cómodo con TypeScript, aún puedes desarrollar módulos en JavaScript simple. Pero como esto nos dará un poco de tráfico por hoy, nos quedaremos con ese archivo. Pero todo se verá como JavaScript simple. No te preocupes por eso.

Si ahora lo miramos por dentro, como ves aquí, ya hay algo de código boilerplate en él. Vamos a explicarlo. En primer lugar, estamos importando algunos UTTs de NextGit, a saber, definido NextModule aquí. Y los utilizaremos más adelante. Luego tenemos una interfaz. Es una forma de describir una estructura de objeto en TypeScript. Pero como prometimos, no habrá magia negra de TypeScript hoy, así que podemos ignorarlo con seguridad. Y luego tenemos nuestra exportación del módulo justo aquí, que hace uso del helper definido NextModule proporcionado por NextGit. Y nuestro módulo es el objeto justo aquí.

Así que, bueno, 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. Así que el nombre de nuestro módulo, la clave de configuración que nos gustaría usar, y digamos next config para resolver nuestras opciones de módulo. Así que 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 saber sobre esos por hoy. Luego tenemos la propiedad defaults aquí. Aquí es donde puedes proporcionar opciones predeterminadas para tu módulo que se resolverán contra las opciones proporcionadas por tus usuarios a tu módulo. De hecho, puedes decir que tu módulo necesita opciones para funcionar, y si no quieres que los usuarios proporcionen todas ellas, puedes establecer un valor predeterminado aquí. Y finalmente, tenemos la función setup justo 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 causar algunos problemas de rendimiento. Recibe dos argumentos, las opciones que el usuario proporcionó coinciden con las opciones predeterminadas que definimos aquí, y el objeto next que podemos usar para interactuar con Next. Y aquí, tenemos algo de código boilerplate por defecto, pero podemos deshacernos de él con seguridad ya que volveremos a él más tarde.

Así que, 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 hay que saber al respecto. Pero solo para recapitular lo que aprendimos. En primer lugar, crear un módulo se puede hacer con NextC en él. Los módulos vienen con nuevos valores predeterminados y un empaquetador por Next. Esta es una mejora bastante nueva desde la experiencia del desarrollador del módulo. 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 usando el nuevo helper definido NextModule, también proporcionado por NextKit.

Así que, como dije, solo 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 preguntarles, ¿quieren que les muestre cómo un módulo puede proporcionar hojas de estilo y helpers a su proyecto, o quieren que les 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, que es bastante emocionante. Así que, una vez más, por favor tomen su teléfono y envíen su voto, y bueno, haré uno de esos dos.

Muy bien. Bueno, está bastante igualado, pero, bueno, tenemos como una mayoría por los assets, así que vamos con assets. Y, tal vez, en tiempo extra, intentaremos hacer el siguiente DevTools. Veremos. Así que, bueno, assets es. Y este es un camino interesante a seguir, porque es tal vez la forma más directa para que proporciones para obtener valor de los módulos que haces. Cuando pensamos en assets con un módulo, pensamos en el directorio runtime, que es este directorio, este justo aquí que he ignorado hasta ahora. Dentro de él puedes proporcionar cualquier tipo de assets que quieras 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 y hagamos algo realmente básico para empezar. Comenzaremos simplemente, como, tratando de proporcionar una hoja de estilo. Así que, ahora mismo, mi aplicación Next, tiene un fondo blanco aquí. Crearemos un estilo que sea CSS-fino. Añadiremos algo de estilo a él. Así que, vamos, como, fondo.

No, no background. Lo siento. Body. Background. Red. Y ahora, una vez que tenemos este estilo CSS-fino, ¿cómo lo inyecto con mi módulo? Bueno, volveremos a nuestro módulo aquí, y necesitamos hacer dos cosas para inyectarlo. Primero, necesitamos crear un resolver. Así que, para hacerlo, ya hemos importado el helper create resolver de NeXTKit.

Así que iremos const resolver equals create resolver. Y le proporcionaremos nuestro módulo, como, la ruta actual. Así que, 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. Así que, una vez que tenemos este helper, podemos simplemente acceder a NeXT.options.css, y simplemente añadiremos nuestro ‑‑ simplemente añadiremos la ruta de nuestro archivo CSS. Así que, vamos resolver.resolve, y le proporcionamos una ruta. Así que, iremos dentro del directorio runtime, y queremos nuestro archivo CSS.

Así que ahora puedo guardar eso, volver a mi terminal, dar un reinicio a 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 quieran, desde la configuración de NeXT. Así que ahora, si ‑‑ bueno, NeXT debería haber terminado de reiniciar. Ahora podemos ver que tenemos nuestro gran fondo rojo brillante inyectado dentro de una aplicación desde nuestro módulo. ¡Genial! Así que. Así que sigamos trabajando con nuestro módulo un poco. Y veamos cómo, por ejemplo, podemos inyectar un plugin desde él.

Así que los plugins de NeXT son una cosa en NeXT que te permite inyectar cosas dentro de tu aplicación en tiempo de ejecución. Así que el iniciador de módulo por defecto viene con uno. Solo añadí esto, como, utilidades de formato aquí para el propósito de la 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. Primero, necesito resolver la ruta de mi plugin. Así que de nuevo, uso mi resolver, y voy 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. Así que ve a nextOptions.build.transfer.push, y empujamos nuestro plugin a él. Y finalmente, hacemos uso del proveedor de plugins de la app de NeXT Kit para decirle a NeXT que necesitas cargar este plugin. Así que ve a app plugin, plugin, y ahora puedo guardar todo eso, darle a NeXT un reinicio. Y de nuevo, mientras se reinicia, esta vez debería ser más rápido porque estoy un poco más preparado.

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

Hagamos un tercero. Con NeXT, podrías estar, podrías estar familiarizado con los auto imports, como cuando tienes componentes dentro de tu directorio de imports, dentro de tu directorio de componentes, ellos son auto importados, no necesitas importarlos. Bueno, los módulos también pueden proporcionar auto imports. Así que creé este directorio de imports dentro de mi directorio de runtime aquí, con algunas utilidades, acabo de bajar mi zoom, algo y algo que predice un valor de bitcon. Así que bueno, gracias por gustar de mis bromas tontas. Así que bueno, ¿cómo añado esto, todas esas utilidades para importar alguna aplicación de NeXT? Bueno, para hacerlo, puedo simplemente usar la utilidad add imports dir, también proporcionada por NeXTKit. Para ello, solo necesito hacer el resolver.resolve una vez más para resolver una ruta lateral. Y solo le doy el runtime y barra diagonal import. Y esto hará que todo en esta carpeta se auto importe dentro de mi aplicación NeXT. Así que aquí, de nuevo, puedo darle a mi NeXT un reinicio rápido. Puedo ir a comprobarlo con mi app aquí. Descomentaré esta línea justo aquí. Así que ahora mismo vemos como, no hay como, definición de tipo. Bueno, en realidad, aquí vamos. Ahora tenemos definición de tipo de NeXT, porque NeXT los auto importó para mí, y creó esta definición de tipo para mí. Y si volvemos a nuestro navegador aquí, a la consola, veremos que tenemos como el pong para el ping pong, el pequeño remipsum, y el valor de bitcon para la próxima ronda. Así que bien.

Así que este fue un ejemplo de lo que los módulos pueden hacer. Por supuesto, podemos hacer mucho más, como añadir auto imports para composables, añadir auto imports para componentes, interactuar con Nitro, puedes hacer cosas realmente poderosas con eso. O también usar los lifecycle hooks de NeXT y más. Y muchos más. Pero no temas perderte nada. Documentamos muchos casos de uso en la documentación de módulos de NeXT. Y podrás seguir eso.

Así que eso no es todo, amigos. Hay una última cosa de la que necesito hablarles. Que hay algunas ventajas adicionales al aprender módulos de NeXT. La primera es que al aprender 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í mismo está parcialmente hecho de módulos y depende de las APIs 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 usas. En ese sentido, siéntete libre de echar un vistazo al código fuente del módulo que usas. Por ejemplo, si echas un vistazo al código fuente del módulo NeXT ColorMod, podemos ver que está usando este patrón ingenioso de usar un alias de NeXT para inyectar sus opciones dentro del NeXT Runtime. Bueno, así es como aprendí mucho sobre NeXT realmente y tú también puedes hacerlo. Segunda cosa, ahora que estamos familiarizados con NeXT, cómo funcionan los módulos de NeXT y todo, todo esto te empodera para contribuir al ecosistema. ¿Encontraste un error mientras usabas un módulo? Puedes solucionarlo. ¿Estás deseando una característica 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, de nuevo, solo dirígete a next.com barra diagonal módulo para una lista completa de módulos comunitarios disponibles con NeXT free.

Así que, esa fue mi charla, módulos NeXT free y código abierto. Realmente espero que hayas aprendido algunas cosas sobre los módulos de NeXT. Son una forma de extender las funcionalidades de NeXT infinitamente. Puedes hacer módulos de NeXT para tu equipo, tu empresa o para toda la comunidad. El siguiente está estructurado con NeXT free y viene con una experiencia de desarrollador mejorada, aprender esa estructura te da una mejor comprensión de NeXT y te permite involucrarte en la comunidad. Podemos 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 más sobre NeXT y más de mis tonterías. Gracias a todos. Muchas gracias, Lucy. Fue una charla realmente interesante. Siéntete libre de sentarte. Y ahora vamos a sumergirnos en algunas preguntas.

La primera es. Solo un segundo. Muy bien. Está recargando, pero ya que está recargando, déjame hacer mi pregunta. ¿Tienes algún punto en el que decides, OK, ahora necesito crear un modelo de Next? OK, sí. Por supuesto, no necesitamos saltar directamente y crear un módulo para todo, porque esto sería excesivo. Como dije, los módulos son geniales para abstraer cosas. Pero es como cuando quieres abstraer cosas, tienes que... Bueno, no viene gratis. Tiene costos de mantenimiento. Así que tienes que preguntarte, bueno, ¿vale la pena abstraer eso? Bueno, si la respuesta es sí, entonces los módulos son una opción para ti para abstraer este código y compartirlo en múltiples proyectos. Por supuesto, si eres solo una empresa, como si estuviera haciendo solo un sitio web de comercio electrónico, puede que no haya muchos casos de uso para crear módulos porque solo estás trabajando en un proyecto de Next. Pero si estás trabajando en una empresa más grande con múltiples proyectos de Next, o una agencia haciendo sitios web como diariamente para múltiples clientes, entonces hay una oportunidad para que crees módulos porque podrías terminar usando el mismo tipo de código. Sí, tiene mucho sentido, porque de lo contrario solo gastas tiempo en abstraer toda la lógica y realmente no ganas nada con ello.

Bien,. Ahora tenemos algunas más preguntas. Y la primera es, ¿cuál es el módulo de Nuxt más raro que has visto? Bueno, supongo que es uno de los módulos que hice. Se llama Nuxt Hue. Y básicamente, no sé si sabes, como en mi lugar, tengo algunas bombillas Philips Hue que son básicamente luces conectadas. Puedo hacerlas azules, rojas y todo. Y básicamente, creé el módulo que cuando hay un error dentro de mi aplicación Nuxt, hace que esas luces parpadeen en mi habitación en rojo, por supuesto. Y wow, cuando desarrollo Nuxt, puede hacer eso. Fue bastante divertido de desarrollar, y también bastante inútil.

Eso suena divertido. La segunda es, ¿cuál es tu módulo favorito que has creado o al que has 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 falso.

Bien, una respuesta algo esperada. La siguiente es, ¿cuánto te preocupa que Nuxt introduzca cambios que rompan los modelos? Dentro del equipo central de Nuxt, realmente valoramos mucho el ecosistema de módulos, porque eso es lo que permitió a Nuxt integrarse tan bien con tantas tecnologías. Seguimos lo mismo allí, y realmente hacemos nuestro mejor esfuerzo para no introducir rupturas para los moduladores y cosas que romperán el módulo, porque esto eventualmente dañará todo el ecosistema. Sé que ha sido un camino accidentado actualizar de Nuxt 2 a Nuxt 3 y todavía estamos trabajando en eso para hacer que el camino de actualización sea más fácil para todos. Creo que Daniel hablará sobre eso más tarde hoy. Nos tomamos eso en serio, y tratamos de no hacer que mantener módulos sea un problema para todos.

Y en la práctica, ¿con qué frecuencia sucede eso, que tienes algunos cambios que rompen la compatibilidad que necesitas manejar? Bueno, Nuxt 3 fue obviamente un gran cambio porque estaba introduciendo soporte para Nuxt 3 y también renovando todo desde el núcleo. En el futuro, tendremos más lanzamientos importantes a un ritmo más rápido, como dentro de 1-2 años quizás, pero esos serán cambios menores y tendremos alguna forma automatizada de hacer la actualización por ti.

Ok, gracias. La siguiente es, si ya estás usando un framework, como Quasar, ¿en qué punto tiene sentido cambiar a Nuxt? Bueno, en realidad no estoy familiarizado con Quasar, así que no estoy seguro de poder dar una respuesta directa 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 por crear? Bueno, con Nuxt, Nuxt tomó muchos años y así tuvimos un ecosistema de módulos realmente vasto con muchos módulos, pero la mayoría de ellos eran realmente geniales. Con Nuxt, el ecosistema todavía es más pequeño hoy en día, por lo que puede haber herramientas que tenemos como un módulo de Nuxt 2 para ello que aún no tenemos un módulo de Nuxt 3 para ello. En ese caso, si notas uno de ellos, sé que estamos trabajando en el módulo off ahora mismo. 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.

Bien, ahora tienes algunas ideas. La siguiente, ¿es Nuxt compatible con Vue 2? Bueno, Nuxt 2 es compatible con Vue 2. Nuxt 3 es compatible con Vue 3. Y, bueno, no planeamos hacer que Nuxt 3 sea compatible con Vue 2 por varias razones, que estoy feliz de discutir contigo si ese es tu problema. Tiene sentido, totalmente. La siguiente. ¿Crees que Vue debería tener un sistema de módulos como Nuxt? Bueno, Vue ya tiene un sistema de módulos que se llama sistema de plugins que te permite integrarte con Vue y crear integración con él. Por ejemplo, el módulo Prismic que proporcionamos a Nuxt es en realidad solo inyectar un plugin de Vue. Tenemos eso que integra Prismic con Vue y lo hace bajo el capó junto con algunas otras personalizaciones de Nuxt. Así que si quieres crear integración con Vue, entonces tienes que revisar los plugins de Vue supongo o si estás pensando en integración en tiempo de compilación, entonces tal vez quieras echar un vistazo a los plugins de Vid.

Ok, gracias por eso. La siguiente es, ¿el directorio de runtime tiene un significado especial en este ejemplo? El directorio de runtime es más una convención, sin embargo, con el comando nuxt module builder que tenemos, aplica una configuración específica a este directorio de runtime, por lo que hace algo como la transpilación de todo lo que está en él al construir tu módulo y así, bueno, tienes que ceñirte a él por esa razón y bueno, puede ser configurable, pero no hablaré más sobre eso. Solo una convención.

Gracias, y muchas preguntas, pero esta es la última. ¿Todo tipo de módulos se publican en el sitio web nux.com slash modules o necesitan pasar algo como una verificación de calidad de código? No realmente. Básicamente, si creas un módulo para integrarte con una herramienta porque aún no hay uno y quieres convertirlo en un módulo comunitario, solo tienes que contactarnos y te ayudaremos a hacer que ese módulo sea un módulo comunitario oficial. Para hacerlo, solo tienes que abrir un ticket o un issue en GitHub, en el GitHub del módulo nux explicar lo que quieres lograr y te ayudaremos cuando llegues allí y, bueno, hacerlo como un módulo comunitario de nux si quieres compartirlo con la comunidad en general.

Está bien, tiene sentido. Pero si no sabes cómo empezar ya, puedes crear módulos de nux simplemente prefijando tu módulo con nux-npm y bueno, reconocemos esos módulos como módulos comunitarios 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.