Aplicar filtros fuera de las templates en Vuejs 2

Aprende a aplicar filtros fuera de las templates en Vuejs 2 para reutilizar tu código, por ejemplo en métodos y computed properties.

Podría ser algo bastante normal en cualquier aplicación, ya que por defecto es donde todos los utilizamos.

Ahora imagina que esos filtros los quieres utilizar en otras clases y lo que sí que no deseas es tener que escribir esa lógica más veces o tener que reinventar la rueda.

La idea es tener un filtro como el siguiente, muy común, que deseemos utilizar en cualquier zona de nuestra aplicación:

Vue.filter('formatDate', function(value) {
    if (value) {
        return moment(String(value)).format('DD/MM/YYYY hh:mm:ss')
    }
    return 'N/A';
});

Aunque nosotros ya sabemos que ese filtro podría ser utilizado en cualquier template de la siguiente forma:

<template>
  <div>{{ user.LastLogin | formatDate }}</div>
</template>

Lo que nos interesa saber ahora es cómo utilizar ese filtro en nuestros métodos de Vuejs, por ejemplo. Y la verdad que es tan sencillo como acceder a $options.filters de Vuejs y aplicarlo de la siguiente forma:

<template>
    <div>{{ lastLogin }}
</template>

<script>
export default {
    computed: {
      lastLogin () {
        return this.$options.filters.formatDate(this.user.LastLogin)
      }
    }
}
</script>

De esa forma tan sencilla podrás reutilizar los filtros de tus aplicaciones sin necesidad de duplicar código o reinventar la rueda.