PUG

Saludos amigos, para el que este haciendo el curso con la nueva version de vue-cli (3+), deben instalar estos paquetes para que puedan usar pug:

npm install -D pug pug-plain-loader

Hasta luego!!

Leo los comentarios molestos por enseñar cosas que no son Vue, yo como profesional del BackEnd, agradezco que me muestren estas tecnologías, ya que estoy desarrollando un proyecto serio, y prefiero aprender más tecnologías que me ayuden en el desarrollo en vez de tardarme mas tiempo haciendolo todo yo por mi cuenta.

Sin embargo, creo que si debería ser como un curso extra, y no parte del curso de Vue.

En efecto a mi no me gusta PUG, html por si solo es muy entendible, para mi es más difícil leer PUG que HTML, interesante aprenderlo pero me quedo con HTML

En lo personal PUG no me aporta nada, SCSS todavía facilita cosas, pero es que PUG… no me convence

aunque digan que pug no es necesario es bueno en cuestión de conocimientos , siempre muy bueno aprender algo nuevo y mas si es un plus que tal vez te sirva algún día

Ya lo usamos en el curso anterior y la verdad no me gusto, se me hace tiempo perdido, mejor usar el html

npm i -D pug-loader

Por si tienen proyectos con htmls extensos, esto podría servirles para ahorrar tiempo.
https://html2jade.org/

Entiendo que pueda ser una herramienta útil para alguno, pero el uso de PUG confunde, no permite visualizar el html tal cual es y concentrarse plenamente en la sintaxis de Vue, en lugar de hacerlo más claro lo hace más confuso. Si no saben escribir html correctamente, deberían aprender.

Es saturar al estudiante desde el inicio, que viene por Vue y dan por sentado que saben usar sass ( yo po ej uso less ), y además pug. Porqué no usar el css de bulma en lugar de tratar de dar todo el workflow de una?

La verdad me gusta Pug (Veo que a varios compañeros no les gusta jaja y tienen sus buenos motivos) pero puede hacer HTML y convertirlo a Pug mediante extensiones, recomiendo estas dos para VSC:

• https://marketplace.visualstudio.com/items?itemName=ditto.convert-html-to-pug
• https://marketplace.visualstudio.com/items?itemName=dbalas.vscode-html2pug

Yo normalmente agrego Pug de otra manera más sencilla:
https://www.npmjs.com/package/vue-cli-plugin-pug

Y si alguno no conocía Pug les recomiendo el curso de Preprocesadores donde se explica (Junto con los de CSS):
https://platzi.com/clases/preprocesadores/

Al instalar Pug unico que veo es que hay mucha inherencia para poca complejidad como lo mencionaban en los videos anteriores

¿Qué es Pug? Bueno es un template engine que mejora la legibilidad de nuestro código. Dando como resultado más facilidad a la hora de dar mantenimiento y aumentando la productividad de nuestro proyecto.

npm install -D pug pug-loader

Home de vuetify en html y en pug

Html:

Pug:

La Indentación que tengo de html es diferente a la de pug, aun asi se me hace menos codigo usando pug y es facil de usar y mas legible a mi parecer.

resultado de ambos

Excelente el uso de Pug, me parece genial para facilitar la lectura del código.

Pug … el Python de HTML jajaja

Pésimo ese PUG, solo le aporta dificultad innecesaria.

Realmente PUG es como bien lo mencionaban agregar complejidad instrumental sin necesidad. Más cuando no ahorra tiempo debido a que es mucho mas simple usar un plugin de snippets en tu editor de codigo.

La verdad no uso mucho Pug, pero es entretenido ver las diferencias entre que hay con el HTML puro

Se nota que se utiliza menos código pero estaríamos añadiendo una complejidad accidental o extra?

se instala pug como herramienta de desarrollo y el pug-loader, sin embargo ya no es necesario configurar el loader dentro de webpack pues ya lo trae el vue-loader.

npm i -D pug pug-loader

xq pug xq?

La verdad pug es un buen preprocesador y es una herramienta importante , se puede decir que no es utilizable sin embargo, para los que trabajan utilizando conveciones de código en equipos de trabajo, esta perfecto.

En mi experiencia, pug me ha servido bastante cuando quiero hacer full maquetación de un sitio desde 0, por ejemplo si necesito pasarlo a wordpress, pug me da mucha facilidad de manejar los templates y reutilizar código. Pero de ahí a usarlo con angular o vue creo que no lo usaría, ya de por sí tener los componentes divididos hace que la parte HTML sea pequeña y precisa.

Yo conocí a Jade gracias a ExpressJS. Pero con VueJS no encuentro sentido el usarlo ya que trae sus propios ciclos y condicionales.
Solo le veo el caso para ahorrar tags de cierre.

¿O existe otra funcionalidad que no puedo vislumbrar?

yo me adelante e instale Pug en un par de pasos antes, soy fan de Pug desde que se llamaba jade.

muchas gracias por tomarte el tiempo de enseñarnos tantas herramientas utiles en el desarrollo de un proyecto, muy buena explicacion.

OMG pug es, hacer mas facil el code OOOMMMGG

Nacho buen curso pero hubiese sido interesante que nos mostraras como configurar nuestro entorno de trabajo de una forma mas rapida y practica usando vue ui para instalar esos plugins y de ahi si ver que cambios hacer

Con HTML estaba bien, no era necesario PUG

👌

Genial que enseñen a integrar Pug con VueJS. Para desarrolladores acostumbrados a python se facilita la lectura con Pug.