Vue filters provide an excellent way to format data on the UI. Define Vue filters using a
filter: block in single file components, or use global filters.
Consider the following use cases -
- Purchase date is stored in
yyyy-mm-ddin DB, but you have to display
- Cost data needs to be displayed in currency of user’s locale
- Apply separators in bill number for better readability
These and many more are easily accomplished in Vue filters. Let us consider an example of formatting numbers in currency.
First, we have the field in template with a small change to include filter.
Next, define filter in
Any number will now be displayed in INR on the UI - e.g. ₹1,00,567.50.