Integrar Pug en Vuejs

Aprende en esta entrada a integrar Pug en Vuejs, un motor de plantillas de alto rendimiento con una sintaxis sencilla y fácil de leer.

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.