In Vue.js I’m currently working on building a table that lists blog posts and one of the columns includes the date the blog post was published. The dates coming back from the server are not formatted so I wanted to hook up a date filter, this is how I did it inside of my blog post component:

var BlogPosts = {
  template: `\
    ...
    <div class="col-md-2">\
      \
    </div>\
    ...
  ',
  data: function() {
    //...
  },
  filters: {
    truncate: function(value) {
      //...
    },
    YYYYMMDD: function(date) {
      return moment(date).format('YYYY-MM-DD');
    }
  },
  methods: {
    //...
  },
  mounted: function() {
    //...
  }
};

Apparently filter names can’t have - in them, so keep that in mind is you build yours.

Also this filter is tied to my component, but it is something I might want to use in other components so I might need to move it out into my main app.js file.