Filtros en Vue 3

Los filtros en Vue 2 los podíamos definir fácilmente por utilizar Vue.filter('nombre', 'fn'), esto en Vue 3 no es posible, pero existen formas de conseguir el mismo resultado fácilmente.

En nuestro caso vamos a crear un sencillo filtro que nos permita formatear fechas con moment, la idea es utilizarlo principalmente a nivel de template, pero también veremos como hacerlo a nivel de componente, todo ello haciendo uso de la nueva API de Composición. Instalar moment y crear filtro global Lo primero que debemos hacer es instalar moment en nuestro proyecto.

yarn add moment

A continuación vamos a abrir nuestro archivo main.js para utilizar moment y de paso crear nuestro filtro, te recomiendo que pases los filtros a un archivo separado, pero para este caso sirve.

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// importamos moment
import * as moment from 'moment'

const app = createApp(App)

// creamos nuestro filtro para formatear fechas con moment
app.config.globalProperties.$filters = {
  dateFormat (date, format = 'DD/MM/YYYY HH:ss') {
    return moment(date).format(format)
  }
}

app
  .use(store)
  .use(router)
  .mount('#app')

Nuestro filtro se llama dateFormat y recibe 2 datos, el primero requerido que es un objeto Date, y el segundo que es el formato y que por defecto ya tiene un valor, así que si no se lo pasamos funcionará igualmente. Utilizar nuestro filtro a nivel de template Para utilizar nuestro filtro en las templates, es bien sencillo, veamos el ejemplo.

<template>
  <div class="filters">
    {{ $filters.dateFormat(date) }}
  </div>
</template>

<script>
export default {
  name: 'Filters',
  setup () {
    const date = new Date()
    return { date }
  }
}
</script>

Brutal, $filters es injectado en nuestras templates, eso funciona perfectamente. Utilizar nuestro filtro a nivel de componente (setup) Este caso es diferente, pero muy sencillo, veamos el ejemplo.

<template>
  <div class="filters">
    {{ $filters.dateFormat(date) }}
    {{ dateFormatted }}
  </div>
</template>

<script>
import { getCurrentInstance } from 'vue'
export default {
  name: 'Filters',
  setup () {
    const app = getCurrentInstance()
    const date = new Date()
    const dateFormatted = app.appContext.config.globalProperties.$filters.dateFormat(date)
    return { date, dateFormatted }
  }
}
</script>

Lo único que debemos hacer es obtener la instancia actual de Vue y acceder a filters de la misma forma que lo definimos previamente, de esta forma podemos aplicar filtros en Vue 3 a nivel de componente.