I’m still learning Vue and one of the things I was a bit slow to discover were filters. (To be fair, they are towards the end of the docs!) Filters, as you can probably guess, allow you to define simple textual transformations to values. So for example, the docs demonstrate a Capitalization filter that will convert the first letter in a string to uppercase. Vue doesn’t ship with any filters baked in, but it’s incredibly easy to write them. A great use case for this is in internationalization and globalization, broadly defined as formatting values in the user’s preferred language.

This helps prevent problems like figuring out exactly what this date is: 4/8/73. For Americans, this is April 8th, 1973. For pretty much the rest of the planet, that date is August 4th, 1973. It would certainly be nice if we could simply format those values appropriately, and automatically, for our users.

This is not a new problem, of course, and multiple libraries exist to help with this. The incredible Moment.js has great support for this right now. But did you know that there’s actually a web standards way of doing this? The Intl spec has been around for nearly six years, but browser support hasn’t been terribly great till most recently. CanIUse.com currently reports support at a pretty high 85%.

Given this level of support, it would be pretty safe to make use of it within our applications. Checking for Intl support can be a simple if(window.Intl) and fallback could be… well, simply punting and displaying the value as is. You would have to decide for yourself if that strategy makes sense.

At a high level, the Intl spec allows you to format dates, numbers, and currencies. It also has support for handling locale-specific sorting and pluralization. Please remember that you can’t just “convert” American dollars into Euros. Yes, I’ve made that mistake before. So given that we’ve got a nice baked in way of internationalizing values and we’ve got Vue, how can we build some filters to support this?

Let’s begin by building a simple demo with no formatting at all. I began with a simple view that presented three values: a date, number, and currency. I also added some simple form fields for quick editing by the user.

<div id="app"> <p>The date is {{ date }}.</p> <p>We've had {{ accidentFree }} accident free days!</p> <p>You're current debt is ${{ debt }}.</p> <hr/> <p> Use to change values above: </p> <p> Date: <input v-model="date"><br/> Accident Free Days: <input v-model="accidentFree"><br/> Debt: <input v-model="debt"><br/> </p> </div> 

The Vue code simply sets up initial values:

const app = new Vue({ el:'#app', data:{ date:new Date(), debt:999999999, accidentFree:3232 } }) 

You can play with this code right now using the embedded CodePen below:

See the Pen Vue Filter Post - P1 by Raymond Camden (@cfjedimaster) on CodePen.

As a quick note, keep in mind that the filters in the demo are running on every single input in the form fields. While it won’t matter for the demo, in a real app that could cause performance issues and a computed property may make more sense. You could also cache the creation of the DateTimeFormatter and NumberFormatter so that you only need to use the format function on those global objects. Please feel free to fork my CodePens and share an example of that!

I hope these examples gave you a small idea of just how easy filters are to use with Vue. I’d love to read your comments about any unique filters you may have built.