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.

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.

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.

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.

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.