Cómo configurar Pug en Vue con webpack

Configura con confianza un preprocesador de HTML en Vue para escribir menos y mantener tu código claro. Aquí verás cómo integrar Pug con Vue Loader y webpack, instalar lo necesario con npm y aplicar la sintaxis esencial de Pug en tu componente app.vue.

¿Qué es Pug y por qué agiliza el HTML en Vue con webpack?

Pug permite escribir plantillas concisas que luego se compilan a HTML a través de webpack. La gran ventaja en este setup: gracias a Vue Loader, no necesitas agregar configuración manual para que funcione. Instalas y listo: puedes usar Pug en tus componentes.

• Escribes menos código y mantienes plantillas limpias.
• Compilas automáticamente con webpack mediante Vue Loader.
• Flujo simple: instalas dependencias y ya puedes usar Pug.

¿Cómo instalarlo con npm y habilitarlo en app.vue?

La instalación se reduce a dos paquetes: npm i -D pug y el pack loader para que funcione con webpack. Como Vue Loader lo usa internamente, no tienes que configurarlo a mano.

• Instala dependencias con npm.
• Abre tu archivo único: app.vue.
• En el bloque de estilos puedes indicar el lenguaje, por ejemplo SASS o SCSS; también podrías marcar CSS tradicional.
• En el bloque de plantilla, indica que quieres usar Pug.
• Convierte tu HTML a Pug y guarda los cambios.
• Si agregaste nuevos loaders: interrumpe el proceso de webpack y ejecuta de nuevo npm run dev para recompilar.

Dato útil: Pug antes se llamaba Jade y cambió de nombre por temas de copyright.

¿Qué sintaxis clave de Pug debes aplicar en el template?

La sintaxis de Pug es indentada: la indentación define la jerarquía. Así aseguras qué elementos están dentro de cuáles.

• Para un contenedor con ID, se usa el símbolo #: crea el div con el ID deseado con un hash.
• Para una clase, se usa el punto, igual que en CSS.
• Los atributos van entre paréntesis: por ejemplo, establecer un source para una imagen.
• No se cierran tags: solo escribes la etiqueta de apertura.
• Estructura típica del ejemplo mencionado: un contenedor con #app, una imagen con un atributo de fuente y un H1 al mismo nivel que la imagen que muestra una expresión message.

Si tras convertir el HTML a Pug borras el código viejo, guarda y verifica. Si algo no se refleja, reinicia el proceso de webpack y corre npm run dev para compilar de nuevo.

¿Te surgieron dudas al migrar a Pug o sobre el uso con Vue Loader y webpack? Comparte tu caso en los comentarios y sigamos la conversación.