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.