Módulos Nuxt 3 y Código Abierto

Rate this content
Bookmark

Los módulos Nuxt son la forma por defecto de extender nuestras aplicaciones Nuxt con nuevos comportamientos y funcionalidades. ¿Alguna vez has construido el tuyo propio? ¿Por qué te molestarías con cientos de módulos ya disponibles? Vamos a responder esas preguntas juntos y ver por qué crear tus propios módulos en Nuxt 3 puede ayudarte a tener una comprensión más profunda de cómo funciona Nuxt, al mismo tiempo que te abre el camino para involucrarte en el código abierto.

31 min
12 May, 2023

Video Summary and Transcription

Los módulos Nuxt.js son una parte central de Nuxt y han tenido 14 millones de descargas. Crear módulos Nuxt es fácil con Nuxt 3. Los módulos pueden proporcionar activos, inyección de CSS, complementos e importaciones automáticas. Aprender los módulos Nuxt brinda una comprensión más profunda de Nuxt y amplía sus funcionalidades. La comunidad de Nuxt es amigable con los recién llegados y fomenta la creación de módulos.

Available in English

1. Introducción a los Módulos de Nuxt.js

Short description:

Comencemos con algunos números. Nuxt.js tuvo 2 millones de descargas en los últimos 30 días, mientras que Vue.js tuvo 16 millones. Los módulos de Nuxt.js tuvieron un total de 14 millones de descargas. Los módulos de Nuxt.js son una parte central de Nuxt y hablaré de ellos hoy.

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.

2. Introducción y Elemento Interactivo

Short description:

Soy Lucie Aberer, una ingeniera de experiencia de desarrollo en Prismic. También soy una orgullosa colaboradora y miembro del equipo principal de Nuxt. En esta charla, quiero hacerla interactiva al preguntarte sobre cómo escribir módulos de Nuxt. ¡Veamos si alguna vez has escrito uno!

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.

3. Introducción a los Módulos de Nuxt

Short description:

Los módulos de Nuxt son como complementos para Nuxt. Pueden ampliar la funcionalidad principal de Nuxt y tienen integraciones infinitas. Puedes crear tus propios módulos o utilizar los existentes para diversos propósitos, como crear una PWA o conectarse a un CMS. Con Nuxt 3, es probable que haya un módulo disponible para cualquier integración que necesites. Consulta el sitio web de módulos de Nuxt.com para obtener una lista completa.

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.

4. Creación de Módulos de Nuxt

Short description:

Los módulos de Nuxt son una excelente manera de abstraer el código de diferentes proyectos y compartirlo. Facilitan la integración con las herramientas que utilizas. Crear un módulo de Nuxt es fácil con Nuxt3. Simplemente inicializa un módulo de Nuxt, instala las dependencias y listo. Tomémonos un minuto para recorrer la estructura del proyecto.

¿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.

5. Configuración para el Desarrollo de Módulos

Short description:

Tenemos el directorio de código fuente, pruebas y un directorio de pruebas para el desarrollo local. El archivo package.json está preconfigurado para el envío de npm. Hay varios scripts, incluido prepack para construir módulos y comandos dev para interactuar con el directorio de pruebas. Hay un script ready disponible para implementar en npm. Las dependencias incluyen NeXTKit y NeXTModuleBuilder. Mantén los archivos raíz predeterminados al compartir con la comunidad.

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.

6. Explorando la Estructura del Módulo

Short description:

Enfoquémonos en el directorio SRC. Dentro de él, tenemos el archivo module.ts, que sirve como punto de entrada del módulo. Es un archivo TypeScript, pero aún puedes desarrollar módulos en JavaScript plano. La exportación del módulo utiliza el helper NextModule definido y consta de la propiedad meta, que contiene metadatos sobre el módulo, la propiedad defaults para proporcionar opciones predeterminadas y la función de configuración.

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í.

7. Ejecución de Código del Módulo y Activos

Short description:

El código ejecutado por Next al cargar nuestro módulo es una función que puede ser asíncrona. 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. NextKit es un conjunto de helpers para desarrollar nuestro módulo. Los módulos se definen utilizando el nuevo helper NextModule definido. Enfoquémonos en los activos, que es la forma más sencilla de proporcionar valor con los módulos. El directorio de tiempo de ejecución es donde puedes inyectar activos como hojas de estilo, componentes de vista y más.

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.

8. Inyectando CSS y Plugins

Short description:

Para inyectar nuestro archivo CSS, accedemos a las opciones de NeXT y agregamos la ruta de nuestro archivo CSS. Después de reiniciar NeXT, podemos ver el fondo rojo llamativo inyectado dentro de una aplicación desde nuestro módulo. Los plugins de NeXT te permiten inyectar cosas dentro de tu aplicación en tiempo de ejecución. Para inyectar un módulo, necesitamos resolver la ruta del plugin y verificar la ruta de nuestro plugin.

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.

9. Transferencia de Módulo de Plugin e Importaciones Automáticas

Short description:

Podemos deshacernos de esta extensión. Le decimos a NeXT que transfiera el plugin usando nextOptions.build.transfer.push. Usamos el proveedor de complementos de la aplicación proporcionado por NeXT Kit para cargar el plugin. Dentro del playground, hacemos un registro de la disponibilidad del módulo. Las utilidades de formato inyectadas desde nuestro módulo se pueden ver en la consola. Los módulos pueden proporcionar importaciones automáticas utilizando la utilidad add imports dir. Las utilidades en el directorio de importaciones se importan automáticamente en la aplicación NeXT. NeXT importa automáticamente las definiciones de tipo y se pueden acceder en la consola del navegador.

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.

10. Ventajas de aprender módulos de NeXT

Short description:

Los módulos pueden hacer mucho más, como agregar importaciones automáticas para composables, componentes, interactuar con Nitro y usar los hooks del ciclo de vida de NeXT. Aprender los módulos de NeXT brinda una comprensión más profunda de cómo funciona NeXT y permite solucionar problemas. NeXT en sí está parcialmente compuesto por módulos. La familiaridad con la estructura de los módulos ayuda a comprender y contribuir al ecosistema. La comunidad de NeXT es amigable con los recién llegados. Los módulos de NeXT amplían las funcionalidades de NeXT y mejoran la experiencia del desarrollador. Involúcrate y encuentra recursos en Lucy.red.

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.

QnA

Questions and Weird Nuxt Module

Short description:

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. ¿Hay algún momento en el que decidas: `Ok, ahora necesito crear un módulo de NeXT`? Por supuesto, no necesitamos crear un módulo para todo de inmediato, porque eso sería excesivo. Los módulos son excelentes para abstraer cosas. Pero debes preguntarte si vale la pena abstraer eso. Si la respuesta es sí, entonces los módulos son una opción para abstraer este código y compartirlo en varios proyectos. Si trabajas en una empresa más grande con múltiples proyectos de NeXT, o una agencia que crea sitios web para varios clientes, entonces tienes la oportunidad de crear módulos. De lo contrario, solo estarás gastando tiempo en abstraer toda la lógica y en realidad no obtendrás nada de ello. ¿Cuál es el módulo de NeXT más extraño que has visto? Se llama Nuxt Hue y hace que las bombillas Philips Hue parpadeen en rojo cuando hay un error en mi aplicación de NeXT. Fue bastante divertido de desarrollar y también bastante inútil.

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.

Nuxt Modules and Compatibility

Short description:

El módulo favorito del orador es el módulo Nuxt Prismic, que se integra con Prismic o CMS. El equipo principal de Nuxt valora el ecosistema de módulos y trata de evitar introducir cambios que rompan la compatibilidad. Nuxt 3 fue un cambio importante, pero las futuras versiones tendrán cambios menores con actualizaciones automatizadas. El orador no está familiarizado con cuándo tiene sentido cambiar de otro framework a Nuxt. Anima a las personas a crear módulos de Nuxt y menciona que algunas herramientas aún no tienen módulos de Nuxt 3. Nuxt es compatible con Vue 2 en Nuxt 2 y Vue 3 en Nuxt 3. El orador explica que Vue ya tiene un sistema de complementos para la integración, y el módulo Prismic inyecta un complemento de Vue junto con otras personalizaciones de Nuxt.

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.

Runtime Directory and Creating Community Modules

Short description:

El directorio de tiempo de ejecución es una convención en los módulos de Nuxt y se somete a una configuración específica durante la construcción del módulo. Crear módulos de la comunidad es fácil al contactar al equipo de Nuxt a través de GitHub. Los módulos pueden ser reconocidos como módulos de la comunidad incluso si no están bajo la organización Nuxt-js en npm.

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

TypeScript Congress 2023TypeScript Congress 2023
31 min
Making Magic: Building a TypeScript-First Framework
I'll dive into the internals of Nuxt to describe how we've built a TypeScript-first framework that is deeply integrated with the user's IDE and type checking setup to offer end-to-end full-stack type safety, hints for layouts, middleware and more, typed runtime configuration options and even typed routing. Plus, I'll highlight what I'm most excited about doing in the days to come and how TypeScript makes that possible not just for us but for any library author.
React Advanced Conference 2022React Advanced Conference 2022
16 min
How to Build Your Own Open Source Project
We all used open source projects every day such as npm packages, editors, web applications, and even operating systems... Have you ever thought of building one of your own? In this talk, I will share my journey building jest-preview, from when it was just a vague idea, to currently a well-adopted library to help frontend engineers write tests faster. I will share with you how to come up with an idea for a project to work on, what is the struggles you have to overcome as an author of an open source project, how to manage time efficiently, and how you get attention from engineers around the world.
Vue.js London 2023Vue.js London 2023
31 min
Image Optimization - Quick Win for Improving Performance in Vue & Nuxt Apps
Improving Performance of Vue or Nuxt apps is not an easy task. However, there are some quick wins that you can implement easily that will drastically improve the performance of your website. One of such quick win is Image Optimization. In this talk, I will teach you how to optimize images on the fly with Digital Asset Managements services like Cloudinary or Content Management Systems, utilize the concept of Lazy Loading, use compressed format of images like WEBP, and many more!
TypeScript Congress 2022TypeScript Congress 2022
30 min
Lessons from Maintaining TypeScript Libraries
Maintaining widely-used JS libraries is already complicated, and TypeScript adds an additional set of challenges.

Join Redux maintainer Mark Erikson for a look at some of the unique problems TS library maintainers face, and how the Redux team has handled those problems. We'll cover:

- Tradeoffs of different ways to define TS types for a library
- How to target different versions of TS, and considerations for determining the supported version range
- Migrating existing JS libraries to TS
- Differences between writing "app" types and "library" types
- Managing and versioning public types APIs
- Tips and tricks used by types from the Redux libraries
- TS limitations and possible language-level improvements
JSNation 2022JSNation 2022
26 min
How JS Modules work: a Browser Perspective
Modules are a popular tool for JavaScript Developers. Recently, there have been a number of proposals touching on how Modules work, including Import Maps, Top level await, JSON modules, Module asserts, and many others. But how does the module loading system work, and how do these proposals augment it? What does it look like from the browsers perspective to load a module tree with an import map? We will explore these questions and more, giving you a behind the scenes look at module loading in JS.

Workshops on related topic

Vue.js London Live 2021Vue.js London Live 2021
117 min
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Top Content
Workshop
We'll build a Nuxt project together from scratch using Nitro, the new Nuxt rendering engine, and Nuxt Bridge. We'll explore some of the ways that you can use and deploy Nitro, whilst building a application together with some of the real-world constraints you'd face when deploying an app for your enterprise. Along the way, fire your questions at me and I'll do my best to answer them.
JSNation 2022JSNation 2022
141 min
Going on an adventure with Nuxt 3, Motion UI and Azure
WorkshopFree
We love easily created and deployed web applications! So, let’s see what a very current tech stack like Nuxt 3, Motion UI and Azure Static Web Apps can do for us. It could very well be a golden trio in modern day web development. Or it could be a fire pit of bugs and errors. Either way it will be a learning adventure for us all. Nuxt 3 has been released just a few months ago, and we cannot wait any longer to explore its new features like its acceptance of Vue 3 and the Nitro Engine. We add a bit of pizzazz to our application with the Sass library Motion UI, because static design is out, and animations are in again.Our driving power of the stack will be Azure. Azure static web apps are new, close to production and a nifty and quick way for developers to deploy their websites. So of course, we must try this out.With some sprinkled Azure Functions on top, we will explore what web development in 2022 can do.
Node Congress 2023Node Congress 2023
85 min
Node.js: Landing your first Open Source contribution & how the Node.js project works
Workshop
This workshop aims to give you an introductory module on the general aspects of Open Source. Follow Claudio Wunder from the OpenJS Foundation to guide you on how the governance model of Node.js work, how high-level decisions are made, and how to land your very first contribution. At the end of the workshop, you'll have a general understanding of all the kinds of work that the Node.js project does (From Bug triage to deciding the Next-10 years of Node.js) and how you can be part of the bigger picture of the JavaScript ecosystem.

The following technologies and soft skills might be needed):
  - Basic understanding of Git & GitHub interface
  - Professional/Intermediate English knowledge for communication and for allowing you to contribute to the Node.js org (As all contributions require communication within GitHub Issues/PRs)
  - The workshop requires you to have a computer (Otherwise, it becomes difficult to collaborate, but tablets are also OK) with an IDE setup, and we recommend VS Code and we recommend the GitHub Pull Requests & Issues Extension for collaborating with Issues and Pull Requests straight from the IDE.

The following themes will be covered during the workshop:
- A recap of some of GitHub UI features, such as GitHub projects and GitHub Issues
- We will cover the basics of Open Source and go through Open Source Guide
- We will recap Markdown
- We will cover Open Source governance and how the Node.js project works and talk about the OpenJS Foundation
  - Including all the ways one might contribute to the Node.js project and how their contributions can be valued
- During this Workshop, we will cover Issues from the nodejs/nodejs.dev as most of them are entry-level and do not require C++ or deep technical knowledge of Node.js.
  - Having that said, we still recommend enthusiast attendees that want to challenge themselves to "Good First Issues" from the nodejs/node (core repository) if they wish.
  - We're going to allow each attendee to choose an issue or to sit together with other attendees and tackle issues together with Pair Programming through VS Code Live Share feature
    - We can also do Zoom breakrooms for people that want to collaborate together
  - Claudio will be there to give support to all attendees and, of course, answer any questions regarding Issues and technical challenges they might face
  - The technologies used within nodejs/nodejs.dev are React/JSX, Markdown, MDX and Gatsby. (No need any knowledge of Gatsby, as most of the issues are platform agnostic)
- By the end of the Workshop, we'll collect all (make a list) the contributors who successfully opened a Pull Request (even if it's a draft) and recognise their participation on Social media.