No hay productos en el carrito.
Pug es un motor de plantillas de alto rendimiento muy influenciado por Haml e implementado con JavaScript para Node.js y navegadores, anteriormente como «Jade».
En este tip and trick vamos a ver cómo podemos utilizar esta gran herramienta en forma de alternativa al tradicional Html que venimos utilizando siempre, todo para tener más alternativas y utilizar la que mejor se adapte a nosotros.
Lo que vamos a conseguir va a ser cambiar de Html a Pug de la siguiente forma:
Pero además, veremos cómo utilizar variables, pasar props, emitir eventos, bucles y todo lo necesario para el día a día de cualquier desarrollador que utilice Vuejs.
Instalar Pug en Vuejs con Vue CLI 3
Lo más sencillo es utilizar Vue CLI 3, ir a la sección de complementos y añadir vue-cli-plugin-pug:
Con eso es suficiente, ¡ya tienes pug instalado en tu proyecto!
Utilizar variables
Este caso realmente es el más sencillo ya que realmente nada cambia, el siguiente ejemplo es 100% funcional:
Lo importante realmente es decirle a nuestra template que queremos utilizar el lenguaje pug con lang=»pug».
Utilizar Props
Este tema es algo distinto ya que si no has trabajado antes con Pug probablemente no sabrás por donde comenzar:
Ahí podemos ver de qué forma podemos pasar props a otros componentes que deseemos utilizar.
Utilizar Eventos
Otro caso muy típico es la emisión de eventos, simplemente debemos utilizar la siguiente sintaxis:
Utilizar Bucles
Para finalizar esta entrada vamos a ver cómo podemos utilizar la directiva v-for y hacer una iteración:
Con eso tienes todas las herramientas necesarias para empezar a utilizar Pug en tus proyectos, verás que tu código será mucho más ordenado que utilizando Html.