Introducción

Vue.js es un framework poderoso pero liviano. Por lo tanto, no viene con cosas innecesarias, los filtros son un ejemplo de ello. En las aplicaciones que desarrollamos, no siempre necesitaremos el filtro currency o de dinero.

Pero habrá algunas ocasiones en las que sí lo necesitaremos, ¿y para qué reinventar la rueda, si alguien más ya lo hizo por nosotros? así que hoy veremos cómo utilizar el filtro de moneda en VueJS.

Instalar filtro

Esto es muy fácil. Simplemente instalamos el filtro que está aquí en GitHub. En mi caso lo haré con NPM.

Para ello, ejecutamos lo siguiente:

npm install --save vue-currency-filter

Estamos listos para utilizarlo.

Registrar filtro

Ahora le tenemos que decir a VueJS que lo utilice. En nuestra app lo importamos y registramos:

See the gist on github.

Listo. Ahora podemos usarlo en nuestra vista.

Configurar filtro

Por defecto, el filtro convierte algo como “589623.54” en “$ 589.624”. Si utilizamos euros, un distinto separador o cosas de esas podemos crear una configuración global al registrarlo. Para ello, pasamos un objeto como segundo argumento. Así:

See the gist on github.

En mi caso, necesito que se filtre como en mi país se hace. En donde algo como “5369.22” se convierte en “$5,369.22” así que…

See the gist on github.

Utilizar filtro

Finalmente, en nuestra vista podemos utilizarlo. En mi caso lo implementé en una tabla:

See the gist on github.

Lo que da este resultado:

Y con eso terminamos por hoy.