In Vue JS, call a filter from a method inside the vue instance

vue use filter in method
vue failed to resolve filter
vue js search filter multiple
vue filter array
vue filter list
vue-filter component
vue filter currency
vue js multiple filters

Say I have a Vue instance like so:

new Vue({
    el: '#app',

    data: {
        word: 'foo',

    filters: {
       capitalize: function(text) {
           return text.replace(/(?:^|\s)\S/g, function(a) { return a.toUpperCase(); });

    methods: {
        sendData: function() {
            var payload = this.$filters.capitalize(this.word); // how?

I can easily use the filter in a template like so:

<span>The word is {{ word | capitalize }}</span>

But how can I use this filter from within an instance method or computed property? (Obviously this example is trivial and my actual filters are more complex).



Is it possible to call a filter from JS? · Issue #405 · vuejs/Discussion , or define a filter globally before creating the Vue instance: Vue.filter('capitalize', function (value) { if (!value) return '' value = value.toString() return value.charAt(0)​  and I want to use the same filter to alert some message to a user. Of course, I can add method instead of filter, and use it, or create method + filter (which calls this method). But actually this is purely a filter, and I just need to call it from JS. Thank you!

This is what worked for me

  1. Defining filter

    //credit to @Bill Criswell for this filter
    Vue.filter('truncate', function (text, stop, clamp) {
        return text.slice(0, stop) + (stop < text.length ? clamp || '...' : '')
  2. Using filter

    import Vue from 'vue'
    let text = Vue.filter('truncate')(sometextToTruncate, 18);

Filters, Firmino Changani Apr 6 '19 ・2 min read. #vue #javascript #filters. Often times you will need to access the global filters in from your vue app inside methods and  You may notice that we’re be able to access this method within that component or Vue instance, and we can call any piece of our data here, in this case, this.message. You don’t have to call a method like you’d call a function within a directive. For example, @click=”methodName()” is unnecessary.

To complement Morris answer, this is an example of a file I normally use to put filters inside, you can use in any view using this method.

var Vue = window.Vue
var moment = window.moment

Vue.filter('fecha', value => {
  return moment.utc(value).local().format('DD MMM YY h:mm A')

Vue.filter('ago', value => {
  return moment.utc(value).local().fromNow()

Vue.filter('number', value => {
  const val = (value / 1).toFixed(2).replace('.', ',')
  return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.')
Vue.filter('size', value => {
  const val = (value / 1).toFixed(0).replace('.', ',')
  return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.')

Accessing vue global filters inside component methods - DEV, Filters are an interesting way to deal with data rendering in Vue but are only for methods, computed values, or watchers, because filters don't that if you declare a Vue filter globally it should come before the Vue instance. Another way to call VueJs method using external java-script. Firstly we should create a file. name event.js. import Vue from 'vue'; export default new Vue({ data: { } }); After that we should import that event.js to our component. import Event from "../event.js"; Then we can emit an event on our javascript function like below

You can create a helper function to map globally registered filters into the methods object of a vue component:

// map-filters.js
export function mapFilters(filters) {
    return filters.reduce((result, filter) => {
        result[filter] = function(...args) {
            return this.$options.filters[filter](...args);
        return result;
    }, {});


import { mapFilters } from './map-filters';

export default {
    methods: {

Using Filters in Vue.js, All you need to know about Vue.js Filters. only allows you to use your filter inside the component it was defined in. PS: The filter definition must always be above the main Vue instance, or you will get a “Failed to resolve filter: toUSD” error. // DECLARATION Vue.filter('toUSD', function (value) { return  Filters. Vue.js allows you to define filters that can be used to apply common text formatting. Filters are usable in two places: mustache interpolations and v-bind expressions (the latter supported in 2.1.0+). Filters should be appended to the end of the JavaScript expression, denoted by the “pipe” symbol:

How to Create Filters in Vue.js with Examples ―, Vue JS is a very progressive framework for building user interfaces created by file and run the command to keep all the dependencies up-to-date: These are the filters that you specify in the Vue application instance, The function in this one transforms everything inside the value to upper case letters. For non-parent-child relation, then this is the same as this one. Call one method, apparently any method of a component from any other component.

Understanding Filters in Vue.js, A Vue.js filter is essentially a function that takes a value, processes it, and You can also use them inside mustache-style bindings: When a filter is invoked, its this context is set to the ViewModel instance that is invoking it. Filters that relies on the state of the ViewModel that is calling it are referred to as computed filters. Vue.js - The Progressive JavaScript Framework. Each Vue instance goes through a series of initialization steps when it’s created - for example, it needs to set up data observation, compile the template, mount the instance to the DOM, and update the DOM when data changes.

Filters in Depth, In Vue JS, call a filter from a method inside the vue instance but $options is undefined - javascript. A Vue instance is essentially a ViewModel as defined in the MVVM pattern, hence the variable name vm you will see throughout the docs.. When you instantiate a Vue instance, you need to pass in an options object which can contain options for data, template, element to mount on, methods, lifecycle callbacks and more.

  • You... BEAUTY!!
  • It's never a good idea to declare things in a global scope, which windows.Vue and windows.moment does, unless you absolutely have to, without any other way.
  • Not true at all for this topics! Globally defined filters per a project is a good rule !