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:

html-component.vue

<template>
  <div class="row">
    <div class="col">
      Super component
    </div>
  </div>
</template>

pug-component.vue

<template lang="pug">
  div.row
    div.col Super component
</template>

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:

<template lang='pug'>
    div.container
        div Vuejs + Pug con {{ name }}
</template>

<script>
export default {
  name: 'home',
  data () {
    return {
      name: 'Cursosdesarrolloweb'
    }
  }
}
</script>

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:

component.vue

<template lang='pug'>
    div.container
      div Vuejs + Pug con {{ name }}
      hello-world(msg="Hola Mundo", :author="name")
</template>

<script>
import HelloWorld from '../components/HelloWorld'
export default {
  name: 'home',
  components: {
    HelloWorld
  },
  data () {
    return {
      name: 'Cursosdesarrolloweb'
    }
  }
}
</script>

helloworld.vue

<template lang='pug'>
  .div.hello
    h1 {{ msg }} - {{ author }}
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String,
    author: String
  }
}
</script>

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:

component.vue

<template lang='pug'>
    div.container
        div Vuejs con Pug en {{ name }}
        hello-world(msg="Hola Mundo", :author="name", @hello="sayHello")
</template>

<script>
import HelloWorld from '../components/HelloWorld'
export default {
  name: 'home',
  components: {
    HelloWorld
  },
  data () {
    return {
      name: 'Cursosdesarrolloweb'
    }
  },
  methods: {
    sayHello () {
      alert('Helloooooo!')
    }
  }
}
</script>

helloworld.vue

<template lang='pug'>
  .div.hello
    h1(@click="$emit('hello')") {{ msg }} - {{ author }}
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String,
    author: String
  }
}
</script>

Utilizar Bucles

Para finalizar esta entrada vamos a ver cómo podemos utilizar la directiva v-for y hacer una iteración:

<template lang='pug'>
    div.container
        ul
            li(v-for="user in users" :key="user.id") {{ user.id}} {{ user.name }}
</template>

<script>
export default {
  data () {
    return {
      users: [
        {id: 1, name: 'user1'},
        {id: 2, name: 'user2'},
        {id: 3, name: 'user3'},
      ]
    }
  }
}
</script>

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.