<div id="app">
  <p>The date is {{ date | date }}.</p>
  <p>We've had {{ accidentFree | number }} accident free days!</p>
  <p>Your current debt is {{ debt | currency }}.</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>
input {
  width:400px;
}
Vue.filter('date', s =>  {
  if(!window.Intl) return s;
  // convert to date
  if(!(s instanceof Date)) {
    let orig = s;
    s = new Date(s);
    if(s == 'Invalid Date') return orig;
  }
  
  return new Intl.DateTimeFormat().format(s);
});

Vue.filter('number', s =>  {
  if(!window.Intl) return s;
  return new Intl.NumberFormat().format(s);
});

//https://stackoverflow.com/a/31135571/52160
function getLang() {
  if (navigator.languages != undefined) return navigator.languages[0]; 
  else return navigator.language;
}

Vue.filter('currency', s =>  {
  let result = new Intl.NumberFormat(getLang(), {style:'currency',currency:'EUR'}).format(s);
  return result;
});

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/vue