21

I tried doing this, but it does not work.

// filter.js

export default {
    converTimestamp: function (seconds) {
      var date = new Date(seconds * 1000);
      return date.toDateString();
    }
};

// main.js

import customFilters from './store/filters';

4 Answers 4

69

Here's an example:

// MyFilter.js
import Vue from 'vue';

Vue.filter('myFilter', value => {
  return value.toUpperCase();
});
// main.js
import './MyFilter.js';

If you don't want to register the filters globally, you can do it like this:

// MyFilter.js
export default function (value) {
  return value.toUpperCase();
}
// MyComponent.vue
import MyFilter from './MyFilter.js';

export default {
  filters: {
    MyFilter,
  },
};
5
  • Thanks, Decade. It worked !! I registered the filter in the main Vue instance. Jul 12, 2017 at 10:24
  • Use @clem 's solution to can reference in components on IDE
    – ali6p
    Apr 11, 2019 at 15:56
  • @DecadeMoon in term of performance, what is it the best method?
    – Oussama He
    Mar 5, 2020 at 20:14
  • @OussamaHe Neither is better or worse performance-wise, it's just a matter of whether you prefer to register the filters globally or import them into each component per-usage (the latter is more work but you can easily trace the source of the filter). Mar 6, 2020 at 3:58
  • I think the second method, where import the filter and add it to the filters property is the best. It's more explicit, and you don't have to worry about namespace clashes that way.
    – Adam
    Jul 11, 2020 at 4:42
10

If you don't have so many filters, you can also define them in a single file:

// filters.js
export default {
    filterA: () => {},
    filterB: () => {},
}

And import them globally:

// main.js
import filters from './filters';
for(let name in filters) {
    Vue.filter(name, filters[name]);
}
2
  • 6
    Actually, a better way to import the filters would be: Object.keys(filters).forEach(key => Vue.filter(key, filters[key])) It prevents triggering the guard-for-in rule from ESLint.
    – clem
    Mar 22, 2019 at 9:34
  • 1
    Here's why it's better to avoid the for ... in zellwk.com/blog/looping-through-js-objects
    – clem
    Mar 22, 2019 at 9:42
2

For Vue3

Create filters.js file:

const filters = {
    upperCase(value) {
        return value.toUpperCase();
    }
}

export default filters;

import the file in main.js and use it globally with globalProperties:

import { createApp } from 'vue';
import filters from './filters'
const app = createApp({});
app.config.globalProperties.$filters = filters;

Then you can use it directly in template, like that:

{{ $filters.upperCase('some text') }}
1

We can create a plugin for that:

// filters.js
import Vue from 'vue'

export function truncate( text, length, suffix = '...' ) {
    if (text.length > length) {
        return text.substring(0, length) + suffix;
    } else {
        return text;
    }
}

export function json( value ) {
    return JSON.stringify(value);
}

const filters = { truncate, json }

Object.keys( filters ).forEach( key => {
    Vue.filter( key, filters[ key ] )
})

then add this new plugin in the config

export default {
  plugins: ['~/plugins/filters.js']
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.