Adding Filters in VueJS

A Filter is a simple JavaScript function which is used  to change the output of a data to the browser. Filters in Vue.JS don’t change the data directly wherever we store them, it only applies formatting to our data. The data remains the same only the output of a data to a browser is changed. Vue.JS doesn’t give these filters by default, so we have to make these filters. With Vue.JS , we can use filters in two different ways i.e. Global filter and Local filter. Global filter provides access all the components while Local filter only allows us to use our filter inside the component it was defined.

Prerequisites: Basics of Vue.JS

Approach: Below all the steps are described order wise to create Filters in Vue.JS .

• Step 1:  Firstly if we want a global filter, we register it by Vue.filter() method
• Step 2: Now  we add Vue.filter() method in the index.js file . This filter function takes a value as the argument and then returns the filter or the transformed value .

Vue.filter('uppercase', function(value));

• Step 3: This function will be executed by Vue.JS whenever this filter is applied to something. This function will automatically receive one input one argument and that’s the value . Vue.JS will pass this value to this function automatically and this will be the value on which we apply this filter.
• Step 4: Now we return the filter or the transformed value.

Vue.filter('uppercase', function (value) {
  return value.toUpperCase();
});

• Step 5: Now go to your template and simply add the filter by adding a pipe symbol and then the name of the filter. Syntax to apply a filter is

{{ title | filtername }}

Below is a sample program to illustrate the above approach:

Global Filter: The scope of global filter is throughout our Vue app.

Example 1: In the below program, we will reverse a given string using global filter.

main.js

Javascript

// GLOBAL FILTER
// In this example, we are
// creating a filter which
// reverses the given string
import Vue from "vue";

// Importing App.vue
import App from "./App.vue";

// Declaration
Vue.filter("reverseString", function (value) {
    return value.split("").reverse().join("");
});

new Vue({
    render: (h) => h(App)
}).$mount("#app");

App.vue

HTML

<!--Template-->
<template>
  <div id="app">

    <!--Applying filter-->
    <h1>{{ name | reverseString }}</h1>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      name: "GEEKSFORGEEKS",
    };
  },
};
</script>

Output

Local Filter: The scope of local filter is within a component.

Example 2: In the below program, we will change given string to uppercase using local filter.

App.vue

Javascript

<!-- Local filter in VueJS -->
<!-- Template -->
<template>
  <div>

    <!-- Applying Uppercase filter -->
    <h1>{{ name| uppercase }}</h1>
  </div>
</template>

<!-- Filter defined locally -->
<script>
export default {
  data: function() {
    return {
      name: "geeksforgeeks"
    };
  },
  filters: {
    uppercase: function(value) {
      return value.toUpperCase();
    }
  }
};
</script>

Output