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:

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.

Cursosdesarrolloweb ©. Todos los derechos reservados.

Login

Create an Account Back to login/register