Filters

Default Convention

The default convention will be used with either of these:

// Use all of the default conventions
import defaultConventions from 'vue-autowire/src/conventions'
// Use only the filters default convention
import defaultFiltersConventions from 'vue-autowire/src/conventions/filters'

It is defined as follows:

{
  filters: {
    requireContext: require.context('@/filters', true, /\/(?:[^.]+|(?!\.local\.js$))\.js$/)
}

Which means:

• Assumes there is a webpack alias defined as @ which maps to the root source of the Vue application. If you are using the Vue-CLI, this is already the case
• With requireContext, all the files inside the @/filters folder that end with .js but not with .local.js will be found. They will be registered as Vue filters within the Vue application and included in the main bundle.

Example

Filters are functions which take an input value and produce an output. We only need to provide this function to autowire it. For example, to produce the following code:

Vue.filter('shout', function (val) {
  return val.toUpperCase();
});

All we need to do is provide the following content in /filters/shout.js:

export default function (val) {
  return val.toUpperCase();
};

The filter will be registered as shout with the associated function provided in shout.js.